diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
8 files changed, 43 insertions, 10 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js index 15525f4..85badb0 100644 --- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js @@ -1,7 +1,9 @@ import React from 'react' +import { CURTAIN_COLOR_LOOKUP } from 'app/constants' export const FullscreenImage = ({ element, media, transitionDuration }) => { - const { color } = element + const color = element.color || CURTAIN_COLOR_LOOKUP.white + const item = media.lookup[element.settings.media_id] const style = { backgroundColor: color.backgroundColor, diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js index 44fa751..3ac8fc6 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js @@ -3,7 +3,7 @@ import { CURTAIN_COLOR_LOOKUP } from 'app/constants' import { MediaCitation, Vitrine, Gallery, Carousel, Grid } from '../components.media' -export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => { +export const InlineVitrine = ({ paragraph, media, onAnnotationClick }) => { const annotation = paragraph.annotations[0] const item = media.lookup[annotation.settings.media_id] const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white @@ -23,7 +23,7 @@ export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnot // <MediaCitation media={item} /> } -export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => { +export const InlineGallery = ({ paragraph, media, onAnnotationClick }) => { const annotation = paragraph.annotations[0] const item = media.lookup[annotation.settings.media_id] return ( @@ -35,7 +35,7 @@ export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnot ) } -export const InlineCarousel = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => { +export const InlineCarousel = ({ paragraph, media, onAnnotationClick }) => { const annotation = paragraph.annotations[0] const item = media.lookup[annotation.settings.media_id] const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white @@ -55,7 +55,7 @@ export const InlineCarousel = ({ paragraph, media, currentParagraph, currentAnno ) } -export const InlineGrid = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => { +export const InlineGrid = ({ paragraph, media, onAnnotationClick }) => { const annotation = paragraph.annotations[0] const item = media.lookup[annotation.settings.media_id] 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 70cf91a..18b026f 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 @@ -5,6 +5,7 @@ import { SpeakerIcon } from '../../nav/viewer.icons' export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => { if (paragraph.hidden) return null + if (paragraph.annotations.length === 0) return null let className = paragraph.type if (className !== 'paragraph') className += ' paragraph' if (currentParagraph) className += ' current' 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 2296d73..d2e9910 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 @@ -242,6 +242,13 @@ justify-content: space-between; height: calc(45vh - 7.5rem); } +.inline-element .vitrine { + margin-top: 1rem; + margin-bottom: 1rem; +} +.inline-element .vitrine-item { + margin-bottom: 1rem; +} .vitrine-items .vitrine-item .vitrine-image { display: flex; justify-content: center; @@ -276,3 +283,10 @@ .inline-element.vitrine .heading { padding-top: 8rem; } +.black .vitrine-item .zoomPlus { + opacity: 0.2; + transition: opacity 0.2s; +} +.black .vitrine-item:hover .zoomPlus { + opacity: 1.0; +} diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js index 3379bfe..bbad771 100644 --- a/animism-align/frontend/app/views/viewer/player/player.container.js +++ b/animism-align/frontend/app/views/viewer/player/player.container.js @@ -70,7 +70,7 @@ class PlayerContainer extends Component { } setCurrentSection() { - const { audio, sections, currentSection, autoAdvance } = this.props + const { audio, currentSection, autoAdvance } = this.props const { play_ts } = audio if (floatInRange(currentSection.start_ts, play_ts, currentSection.end_ts)) { return 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 90e4925..23648b9 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 } = this.props + const { audio, timeline, currentSection } = this.props const { play_ts } = audio const elements = timeline.filter(element => ( floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1) @@ -36,7 +36,7 @@ class PlayerFullscreen extends Component { actions.viewer.setNavStyle('white') } } else { - actions.viewer.setNavStyle('white') + actions.viewer.setNavStyle(currentSection.color) } this.setState({ elements }) } @@ -101,6 +101,7 @@ const FirstChild = (props) => { } const mapStateToProps = state => ({ + currentSection: state.viewer.currentSection, audio: state.audio, media: state.media.index, timeline: state.viewer.currentSection ? state.viewer.currentSection.fullscreenTimeline : [], 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 f34da4a..1de88c7 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -7,6 +7,11 @@ overflow-y: scroll; } +.player-transcript.black { + background: #000; + color: #fff; +} + .player-transcript .section_heading, .player-transcript .paragraph.intro_paragraph { font-family: "Freight Text", serif; @@ -162,6 +167,12 @@ .paragraph:hover .speaker-icon { opacity: 1; } +.player-transcript.black .speaker-icon svg { + background: white; +} +.player-transcript.black .speaker-icon svg path { + fill: black; +} /* media */ diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js index 0d0a636..dbc87b5 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.js +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js @@ -54,9 +54,13 @@ class PlayerTranscript extends Component { } render() { - const { paragraphs } = this.props.section + const { paragraphs, color } = this.props.section return ( - <div className="player-transcript" ref={this.containerRef} onScroll={this.handleScroll}> + <div + className={"player-transcript " + color} + ref={this.containerRef} + onScroll={this.handleScroll} + > <div className='content'> <ParagraphList paragraphs={paragraphs} |