diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer')
6 files changed, 230 insertions, 6 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js new file mode 100644 index 0000000..c65c2e6 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js @@ -0,0 +1,97 @@ +import React from 'react' +import { connect } from 'react-redux' + +import actions from 'app/actions' +import { timestamp } from 'app/utils' + +// arrows + +const arrows = { + down: ( + <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"> + <polygon points="10.06,16.14 9.51,16.98 20,23.86 30.49,16.98 29.94,16.14 20,22.66" /> + </svg> + ), + up: ( + <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"> + <polygon points="10.06,23.86 9.51,23.02 20,16.14 30.49,23.02 29.94,23.86 20,17.34" /> + </svg> + ), + right: ( + <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="10 0 20 40"> + <polygon points="16.98,30.49 16.14,29.94 22.66,20 16.14,10.06 16.98,9.51 23.86,20" /> + </svg> + ), + left: ( + <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="10 0 20 40"> + <polygon points="23.02,30.49 16.14,20 23.02,9.51 23.86,10.06 17.34,20 23.86,29.94" /> + </svg> + ), +} + +export const Arrow = React.memo(({ type }) => ( + <div className={'arrow ' + type}> + {arrows[type]} + </div> +)) + + +// volume toggle + +const VolumeIcon = React.memo(({ muted }) => ( + <div className={muted ? 'volume muted' : 'volume'} onClick={() => actions.audio.toggleMuted()}> + <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"> + <path d="M5,25h4.17l0,2.5H5V25z M15.33,27.5h4.17V20h-4.17V27.5z M20.5,27.5h4.17v-10H20.5V27.5z M25.67,27.5h4.17V15h-4.17V27.5z + M30.83,27.5H35v-15h-4.17V27.5z M10.17,27.5h4.17v-5h-4.17V27.5z"/> + </svg> + </div> +)) + +export const VolumeControl = connect(state => ({ + muted: state.audio.muted, +}))(VolumeIcon) + + +// play / pause button + +const PlayIcon = ( + <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"> + <polygon points="12.5,11 12.5,29 27.5,20 " /> + </svg> +) +const PauseIcon = ( + <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"> + <path d="M14.34,12.5h4.16v15h-4.16V12.5z M21.5,27.5h4.17v-15H21.5V27.5z" /> + </svg> +) + +const PlayButtonIcon = ({ playing }) => { + return ( + <div + className='playToggle' + onClick={() => playing ? actions.audio.pause() : actions.audio.play()} + > + {playing ? PauseIcon : PlayIcon} + </div> + ) +} + +export const PlayButton = connect(state => ({ + playing: state.audio.playing, +}))(PlayButtonIcon) + + +// player current time + +const PlayerTimeSpan = ({ play_ts, duration }) => ( + <span className='playerTime'> + {timestamp(play_ts)} + {' / '} + {timestamp(duration)} + </span> +) + +export const PlayerTime = connect(state => ({ + play_ts: state.audio.play_ts, + duration: state.align.timeline.duration, +}))(PlayerTimeSpan) diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js index 7b5a4c7..4200b03 100644 --- a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js +++ b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js @@ -3,6 +3,8 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import actions from 'app/actions' +import { ROMAN_NUMERALS } from 'app/constants' +import { Arrow, VolumeControl, PlayButton, PlayerTime } from './viewer.icons' class ViewerNav extends Component { componentDidMount() { @@ -12,7 +14,23 @@ class ViewerNav extends Component { const { } = this.props return ( <div className="viewer-nav"> - Viewer nav + <div className='nav-row main-nav'> + <div> + <Arrow type={'up'} /> + {ROMAN_NUMERALS[0]} + {'. '} + {'Introduction'} + </div> + <div> + <PlayButton /> + <PlayerTime /> + <VolumeControl /> + </div> + <div> + Next + <Arrow type={'right'} /> + </div> + </div> </div> ) } diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js index e6d7d09..d3d3e9f 100644 --- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js +++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js @@ -27,7 +27,7 @@ class Transcript extends Component { render() { const { viewer } = this.props return ( - <div className={viewer.transcript ? "transcript visible" : "transcript"}> + <div className="transcript"> <div className='content'> <ParagraphList paragraphElementLookup={transcriptElementLookup} @@ -39,6 +39,9 @@ class Transcript extends Component { className='close' onClick={this.handleClose} /> + <a className='footer' href='#'> + Download PDF + </a> </div> ) } diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.css b/animism-align/frontend/app/views/viewer/transcript/transcript.css index 38af9f5..a42615d 100644 --- a/animism-align/frontend/app/views/viewer/transcript/transcript.css +++ b/animism-align/frontend/app/views/viewer/transcript/transcript.css @@ -18,11 +18,22 @@ pointer-events: none; user-select: none; } -.transcript.visible { +.transcript-open .transcript { pointer-events: auto; user-select: auto; transform: translateZ(0) translateX(0); } +.transcript .footer { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + background: black; + color: white; + display: flex; + justify-content: center; + align-items: center; +} /* general paragraph styles */ @@ -34,7 +45,7 @@ padding: 1.5rem 2rem 6rem 1.5rem; position: relative; } -.transcript.visible .content { +.transcript-open .transcript .content { overflow-y: scroll; } diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js index 080925f..b5d9721 100644 --- a/animism-align/frontend/app/views/viewer/viewer.container.js +++ b/animism-align/frontend/app/views/viewer/viewer.container.js @@ -55,13 +55,15 @@ class ViewerContainer extends Component { if (!loaded) { return <div className='viewer loading'><Loader /></div> } + let className = 'viewer-container' + if (viewer.transcript) className += 'transcript-open' return ( <div> <div className='viewer'> - <div className={viewer.transcript ? 'viewer-container transcript-open' : 'viewer-container'}> + <div className={className}> <Player /> - <ViewerNav /> </div> + <ViewerNav /> <Transcript /> <Checklist /> <Route exact path='/viewer/:component/' component={ViewerRouter} /> diff --git a/animism-align/frontend/app/views/viewer/viewer.nav.css b/animism-align/frontend/app/views/viewer/viewer.nav.css index 809f2af..3797619 100644 --- a/animism-align/frontend/app/views/viewer/viewer.nav.css +++ b/animism-align/frontend/app/views/viewer/viewer.nav.css @@ -3,4 +3,97 @@ bottom: 0; left: 0; width: 100%; + font-size: 18px; +} + +/* The main nav row */ + +.viewer-nav > .nav-row { + width: 100%; + padding: 0.25rem 0 0.25rem 0; + display: flex; + justify-content: space-between; + align-items: center; +} +.viewer-nav > .nav-row > div { + display: flex; + justify-content: center; + align-items: center; + width: 32%; +} +.viewer-nav > .nav-row > div:nth-child(1) { + justify-content: flex-start; + align-items: center; +} +.viewer-nav > .nav-row > div:nth-child(2) { + justify-content: center; + align-items: center; +} +.viewer-nav > .nav-row > div:nth-child(3) { + justify-content: flex-end; + align-items: center; +} + +/* Arrows */ + +.viewer-nav .arrow { + width: 2.5rem; + height: 2.5rem; + display: flex; + justify-content: center; + align-items: center; +} +.viewer-nav .arrow.left, +.viewer-nav .arrow.right { + width: 1.25rem; +} +.viewer-nav .arrow svg { + width: 100%; + height: 100%; +} + +/* Volume button */ + +.volume { + cursor: pointer; + width: 2.5rem; + height: 2.5rem; +} +.volume path { + fill: #000; +} +.volume.muted path { + fill: #fff; + stroke: #000; + stroke-width: 0.5; +} +.nav-open .volume path { + fill: #fff; +} +.nav-open .volume.muted path { + fill: #000; + stroke: #fff; +} + +/* Play button */ + +.playToggle { + cursor: pointer; + width: 2.5rem; + height: 2.5rem; +} +.playToggle path, +.playToggle polygon { + fill: #000; +} +.nav-open .playToggle path, +.nav-open .playToggle polygon { + fill: #fff; +} + +/* Player time */ + +.playerTime { + margin-left: 0.5rem; + margin-right: 0.75rem; } |