diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
11 files changed, 194 insertions, 16 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.image.js new file mode 100644 index 0000000..f005fc0 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.image.js @@ -0,0 +1,46 @@ +import React, { Component } from 'react' + +export const MediaCitation = ({ media }) => { + if (media.citation) { + return ( + <span dangerouslySetInnerHTML={{ _html: media.citation }} /> + ) + } + return ( + <span> + {media.author} + {', '} + {media.pre_title} + <i>{media.title}</i> + {media.post_title} + {'. '} + {media.date && ( + ' ' + media.date + '.' + )} + {media.medium && ( + ' ' + media.medium + '.' + )} + {media.source && ( + ' ' + media.source.trim() + )} + </span> + ) +} + +export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { + if (!media.lookup) return <div /> + const className = currentParagraph ? 'media image current' : 'media image' + const annotation = paragraph.annotations[0] + const item = media.lookup[annotation.settings.media_id] + if (!item) return <div>Media not found: {annotation.settings.media_id}</div> + return ( + <div + className={className} + onDoubleClick={e => onDoubleClick(e, paragraph)} + > + {"["} + <MediaCitation media={item} /> + {"]"} + </div> + ) +} diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.text.js b/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.text.js new file mode 100644 index 0000000..8825479 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.text.js @@ -0,0 +1,37 @@ +import React, { Component } from 'react' + +import { ROMAN_NUMERALS } from 'app/constants' + +export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { + let className = paragraph.type + if (className !== 'paragraph') className += ' paragraph' + if (currentParagraph) className += ' current' + return ( + <div + className={className} + onDoubleClick={e => onDoubleClick(e, paragraph)} + > + {paragraph.annotations.map(annotation => ( + <span + key={annotation.id} + className={annotation.id === currentAnnotation ? 'current' : ''} + onClick={e => onAnnotationClick(e, paragraph, annotation)} + dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }} + /> + ))} + </div> + ) +} + +export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { + let className = currentParagraph ? 'header current' : 'header' + const text = paragraph.annotations.map(annotation => annotation.text).join(' ') + return ( + <div + className={className} + onDoubleClick={e => onDoubleClick(e, paragraph)} + > + <span>{ROMAN_NUMERALS[paragraph.sectionIndex]}{'. '}{text}</span> + </div> + ) +} diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.video.js new file mode 100644 index 0000000..fe821eb --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.video.js @@ -0,0 +1,21 @@ +import React, { Component } from 'react' + +import { MediaCitation } from './elementTypes.image' + +export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { + if (!media.lookup) return <div /> + const className = currentParagraph ? 'media current' : 'media' + const annotation = paragraph.annotations[0] + const item = media.lookup[annotation.settings.media_id] + if (!item) return <div>Media not found: {annotation.settings.media_id}</div> + return ( + <div + className={className} + onDoubleClick={e => onDoubleClick(e, paragraph)} + > + {"["} + <MediaCitation media={item} /> + {"]"} + </div> + ) +} diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/index.js b/animism-align/frontend/app/views/viewer/player/components.inline/index.js new file mode 100644 index 0000000..ee65641 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js @@ -0,0 +1,24 @@ +import React from 'react' + +import { + Paragraph, ParagraphHeading +} from './elementTypes.text' + +import { + MediaVideo +} from './elementTypes.video' + +import { + MediaImage +} from './elementTypes.image' + +export const transcriptElementLookup = { + paragraph: React.memo(Paragraph), + hidden: React.memo(Paragraph), + blockquote: React.memo(Paragraph), + section_heading: React.memo(ParagraphHeading), + heading_text: React.memo(ParagraphHeading), + header: React.memo(ParagraphHeading), + video: React.memo(MediaVideo), + image: React.memo(MediaImage), +} diff --git a/animism-align/frontend/app/views/viewer/player/player.container.css b/animism-align/frontend/app/views/viewer/player/player.container.css new file mode 100644 index 0000000..4a0d539 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/player.container.css @@ -0,0 +1,18 @@ +.viewer-container { + position: absolute; + top: 0; left: 0; + width: 100vw; + height: 100vh; + /*transform: translateZ(0) translateX(0);*/ + transition: all 0.2s; +} + +.transcript-open .viewer-container { + /*transform: translateZ(0) translateX(-31.875rem);*/ + width: calc(100vw - 31.875rem); +} + +.nav-open .viewer-container { + /*transform: translateZ(0) translateX(-31.875rem);*/ + height: calc(100vh - 25rem); +} 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 0340171..1ddb5c7 100644 --- a/animism-align/frontend/app/views/viewer/player/player.container.js +++ b/animism-align/frontend/app/views/viewer/player/player.container.js @@ -1,20 +1,16 @@ import React, { Component } from 'react' -// import { Link } from 'react-router-dom' import { connect } from 'react-redux' import { floatInRange } from 'app/utils' import actions from 'app/actions' import PlayerTranscript from './player.transcript' +import PlayerFullscreen from './player.fullscreen' class PlayerContainer extends Component { - state = { - currentSection: null, - } - componentDidMount() { // console.log(this.props.sections) - this.setState({ currentSection: this.props.sections[0] }) + actions.viewer.setCurrentSection(this.props.sections[0]) } componentDidUpdate(prevProps) { @@ -23,8 +19,7 @@ class PlayerContainer extends Component { } setCurrentSection() { - const { currentSection } = this.state - const { audio, sections } = this.props + const { audio, sections, currentSection } = this.props const { play_ts } = audio if (floatInRange(currentSection.start_ts, play_ts, currentSection.end_ts)) { return @@ -33,26 +28,27 @@ class PlayerContainer extends Component { const insideSection = sections.some(section => { if (floatInRange(section.start_ts, play_ts, section.end_ts)) { if (currentSection !== section) { - this.setState({ currentSection: section }) + actions.viewer.setCurrentSection(section) } return true } return false }) if (!insideSection) { - this.setState({ currentSection: sections[0] }) + actions.viewer.setCurrentSection(sections[0]) } } render() { // const { } = this.props - const { currentSection } = this.state + const { currentSection, fullscreenTimeline } = this.props if (!currentSection) { return <div /> } // console.log(currentSection) return ( <div className='viewer-container'> <PlayerTranscript section={currentSection} /> + <PlayerFullscreen timeline={fullscreenTimeline} /> </div> ) } @@ -62,6 +58,7 @@ const mapStateToProps = state => ({ audio: state.audio, sections: state.viewer.sections, fullscreenTimeline: state.viewer.fullscreenTimeline, + currentSection: state.viewer.currentSection, }) export default connect(mapStateToProps)(PlayerContainer) diff --git a/animism-align/frontend/app/views/viewer/player/player.css b/animism-align/frontend/app/views/viewer/player/player.css deleted file mode 100644 index 76a78eb..0000000 --- a/animism-align/frontend/app/views/viewer/player/player.css +++ /dev/null @@ -1,4 +0,0 @@ -.viewer-container { - position: absolute; - top: 0; left: 0; -}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css new file mode 100644 index 0000000..8041c84 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css @@ -0,0 +1,14 @@ +.viewer-fullscreen { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; + user-select: none; +} +.viewer-fullscreen.active { + pointer-events: auto; + user-select: auto; +}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js new file mode 100644 index 0000000..89052ed --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js @@ -0,0 +1,22 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' + +import actions from 'app/actions' + +class PlayerFullscreen extends Component { + componentDidMount() { + } + + render() { + const { } = this.props + return ( + <div className="viewer-fullscreen"> + </div> + ) + } +} + +const mapStateToProps = state => ({ +}) + +export default connect(mapStateToProps)(PlayerFullscreen) 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 f9a9863..4ca9475 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -60,6 +60,10 @@ .player-transcript .hidden { } +.player-transcript .paragraph:last-child { + margin-bottom: 6rem; +} + .player-transcript .blockquote { padding-left: 2rem; line-height: 1.45; 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 a315781..530b9d6 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.js +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js @@ -22,7 +22,6 @@ class PlayerTranscript extends Component { } handleParagraphDoubleClick(e, paragraph) { - return } handleClose() { |