diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
10 files changed, 158 insertions, 11 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 new file mode 100644 index 0000000..c0e4b0e --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js @@ -0,0 +1,16 @@ +import React from 'react' + +export const Image = ({ 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 image' + style={style} + > + </div> + ) +} 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 new file mode 100644 index 0000000..c86236d --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js @@ -0,0 +1,18 @@ +import React from 'react' + +export const Curtain = ({ element, transitionDuration }) => { + // console.log(element, isEntering) + const { color } = element + const style = { + backgroundColor: color.backgroundColor, + color: color.textColor, + transitionDuration, + } + return ( + <div + className='fullscreen-element curtain' + style={style} + > + </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 new file mode 100644 index 0000000..3befbde --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js @@ -0,0 +1,19 @@ +import React from 'react' + +// import { +// MediaVideo +// } from './fullscreen.video' + +import { + Image +} from './fullscreen.image' + +import { + Curtain +} from './fullscreen.utility' + +export const fullscreenComponents = { + curtain: React.memo(Curtain), + // video: React.memo(MediaVideo), + image: React.memo(Image), +} 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 ee65641..89d1d42 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 @@ -2,15 +2,15 @@ import React from 'react' import { Paragraph, ParagraphHeading -} from './elementTypes.text' +} from './inline.text' import { MediaVideo -} from './elementTypes.video' +} from './inline.video' import { MediaImage -} from './elementTypes.image' +} from './inline.image' export const transcriptElementLookup = { paragraph: React.memo(Paragraph), 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/inline.image.js index f005fc0..f005fc0 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.image.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js 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/inline.text.js index 8825479..8825479 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.text.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js 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/inline.video.js index fe821eb..fe821eb 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.video.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js 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 1ddb5c7..9655955 100644 --- a/animism-align/frontend/app/views/viewer/player/player.container.js +++ b/animism-align/frontend/app/views/viewer/player/player.container.js @@ -1,8 +1,8 @@ import React, { Component } from 'react' import { connect } from 'react-redux' -import { floatInRange } from 'app/utils' import actions from 'app/actions' +import { floatInRange } from 'app/utils' import PlayerTranscript from './player.transcript' import PlayerFullscreen from './player.fullscreen' @@ -38,17 +38,16 @@ class PlayerContainer extends Component { actions.viewer.setCurrentSection(sections[0]) } } - render() { // const { } = this.props - const { currentSection, fullscreenTimeline } = this.props + const { currentSection } = this.props if (!currentSection) { return <div /> } // console.log(currentSection) return ( <div className='viewer-container'> <PlayerTranscript section={currentSection} /> - <PlayerFullscreen timeline={fullscreenTimeline} /> + <PlayerFullscreen /> </div> ) } @@ -57,7 +56,6 @@ class PlayerContainer extends Component { const mapStateToProps = state => ({ audio: state.audio, sections: state.viewer.sections, - fullscreenTimeline: state.viewer.fullscreenTimeline, currentSection: state.viewer.currentSection, }) diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css index 8041c84..fb4d8af 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css @@ -11,4 +11,39 @@ .viewer-fullscreen.active { pointer-events: auto; user-select: auto; -}
\ No newline at end of file +} + +/* transitions */ + +.viewer-fullscreen .fade-enter { + opacity: 0; +} +.viewer-fullscreen .fade-enter.fade-enter-active { + opacity: 1; + transition-property: opacity; +} +.viewer-fullscreen .fade-exit { + opacity: 1; +} +.viewer-fullscreen .fade-exit-active { + opacity: 0; + transition-property: opacity; +} + +/* elements */ + +.viewer-fullscreen .fullscreen-element { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +.viewer-fullscreen .curtain { +} + +.viewer-fullscreen .image { + background-size: cover; + background-position: center center; +} 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 89052ed..47c6cd2 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js @@ -1,22 +1,83 @@ import React, { Component } from 'react' import { connect } from 'react-redux' +import { TransitionGroup, CSSTransition } from 'react-transition-group' import actions from 'app/actions' +import { floatInRange, floatLT } from 'app/utils' + +import { fullscreenComponents } from './components.fullscreen' class PlayerFullscreen extends Component { + state = { + elements: [], + } + componentDidMount() { + this.setCurrentElements() + } + + componentDidUpdate(prevProps) { + if (this.props.audio.play_ts === prevProps.audio.play_ts) return + this.setCurrentElements() } - + + setCurrentElements() { + const { audio, timeline } = this.props + const { play_ts } = audio + const elements = timeline.filter(element => ( + floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1) + )) + this.setState({ elements }) + } + render() { - const { } = this.props + const { audio, media } = this.props + const { play_ts } = audio + const { elements } = this.state + // console.log(elements, play_ts) return ( <div className="viewer-fullscreen"> + <TransitionGroup> + {elements.map(element => { + if (!(element.type in fullscreenComponents)) { + return null + } + const isEntering = floatInRange(element.start_ts, play_ts, element.fade_in_end_ts) + const FullscreenComponent = fullscreenComponents[element.type] + const transitionDuration = (isEntering ? (1000 * element.fadeInDuration) : (1000 * element.fadeOutDuration)) + 'ms' + return ( + <CSSTransition + key={element.index} + classNames="fade" + timeout={{ + enter: element.fadeInDuration * 1000, + exit: element.fadeOutDuration * 1000, + }} + component={FirstChild} + > + <FullscreenComponent + element={element} + media={media} + transitionDuration={transitionDuration} + /> + </CSSTransition> + ) + })} + </TransitionGroup> </div> ) } } +const FirstChild = (props) => { + const childrenArray = React.Children.toArray(props.children); + return childrenArray[0] || null; +} + const mapStateToProps = state => ({ + audio: state.audio, + media: state.media.index, + timeline: state.viewer.fullscreenTimeline, }) export default connect(mapStateToProps)(PlayerFullscreen) |