diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
9 files changed, 45 insertions, 27 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 c0e4b0e..6ca6d79 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,6 +1,6 @@ import React from 'react' -export const Image = ({ element, media, transitionDuration }) => { +export const FullscreenImage = ({ element, media, transitionDuration }) => { const item = media.lookup[element.settings.media_id] const style = { transitionDuration, diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js index c86236d..3a0e21d 100644 --- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js @@ -1,6 +1,6 @@ import React from 'react' -export const Curtain = ({ element, transitionDuration }) => { +export const FullscreenCurtain = ({ element, transitionDuration }) => { // console.log(element, isEntering) const { color } = element const style = { 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 new file mode 100644 index 0000000..9122426 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js @@ -0,0 +1,18 @@ +import React from 'react' +import VimeoPlayer from '@u-wave/react-vimeo' + +export const FullscreenVideo = ({ element, media, transitionDuration }) => { + const item = media.lookup[element.settings.media_id] + const style = { + transitionDuration, + backgroundImage: 'url(' + item.settings.display.url + ')', + } + return ( + <div + className='fullscreen-element video' + style={style} + > + <VimeoPlayer video={data.url} autoplay muted /> + </div> + ) +} diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js index 3befbde..f533123 100644 --- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js @@ -1,19 +1,19 @@ import React from 'react' -// import { -// MediaVideo -// } from './fullscreen.video' - import { - Image + FullscreenImage } from './fullscreen.image' import { - Curtain + FullscreenVideo +} from './fullscreen.video' + +import { + FullscreenCurtain } from './fullscreen.utility' export const fullscreenComponents = { - curtain: React.memo(Curtain), - // video: React.memo(MediaVideo), - image: React.memo(Image), + curtain: React.memo(FullscreenCurtain), + video: React.memo(FullscreenVideo), + image: React.memo(FullscreenImage), } 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 index 89d1d42..9ad083d 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/index.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js @@ -12,7 +12,7 @@ import { MediaImage } from './inline.image' -export const transcriptElementLookup = { +export const inlineComponents = { paragraph: React.memo(Paragraph), hidden: React.memo(Paragraph), blockquote: React.memo(Paragraph), 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 8825479..f544e6f 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 @@ -2,14 +2,14 @@ import React, { Component } from 'react' import { ROMAN_NUMERALS } from 'app/constants' -export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { +export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => { + if (paragraph.hidden) return null 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 @@ -23,13 +23,13 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn ) } -export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { - let className = currentParagraph ? 'header current' : 'header' +export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => { + 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} - 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/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js index fe821eb..463ca8e 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 @@ -1,6 +1,6 @@ import React, { Component } from 'react' -import { MediaCitation } from './elementTypes.image' +import { MediaCitation } from './inline.image' export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { if (!media.lookup) return <div /> 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 4ca9475..00ca675 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -7,7 +7,7 @@ overflow-y: scroll; } -.player-transcript .header, +.player-transcript .section_heading, .player-transcript .paragraph { font-family: "Freight Text", serif; font-size: 3rem; @@ -17,10 +17,10 @@ margin: 0 auto; padding-bottom: 2rem; } -.player-transcript .header { +.player-transcript .section_heading { text-align: center; } -.player-transcript .header:first-child { +.player-transcript .section_heading:first-child { margin-top: 8rem; } @@ -46,14 +46,14 @@ /* paragraph subtypes */ -.player-transcript .header { +.player-transcript .section_heading { text-align: center; padding-top: 2rem; } -.player-transcript .header:first-of-type { +.player-transcript .section_heading:first-of-type { padding-top: 0; } -.player-transcript .header span { +.player-transcript .section_heading span { } .player-transcript .paragraph, 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 530b9d6..a491a88 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.js +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js @@ -6,7 +6,7 @@ import { connect } from 'react-redux' import actions from 'app/actions' import ParagraphList from 'app/views/paragraph/components/paragraph.list' -import { transcriptElementLookup } from '../transcript/components' +import { inlineComponents } from './components.inline' class PlayerTranscript extends Component { constructor(props){ @@ -18,7 +18,7 @@ class PlayerTranscript extends Component { handleAnnotationClick(e, paragraph, annotation) { console.log(annotation) - actions.audio.seek(annotation.start_ts) + // actions.audio.seek(annotation.start_ts) } handleParagraphDoubleClick(e, paragraph) { @@ -34,7 +34,7 @@ class PlayerTranscript extends Component { <div className='content'> <ParagraphList paragraphs={paragraphs} - paragraphElementLookup={transcriptElementLookup} + paragraphElementLookup={inlineComponents} onAnnotationClick={this.handleAnnotationClick} onParagraphDoubleClick={this.handleParagraphDoubleClick} /> |