diff options
Diffstat (limited to 'animism-align/frontend')
5 files changed, 45 insertions, 16 deletions
diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js index 3afd096..ca088c4 100644 --- a/animism-align/frontend/app/utils/annotation.utils.js +++ b/animism-align/frontend/app/utils/annotation.utils.js @@ -113,6 +113,10 @@ export const sectionProgressPercentage = (section, play_ts) => { return (Math.round(sectionProgress(section, play_ts) * 2000) / 20) + '%' } +export const sectionOffsetSeconds = (section, percent) => { + return (section.start_ts + section.duration * percent) +} + export const makeMediaItems = (media, types) => { const { lookup, order } = media if (types instanceof String) { diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js index 5f1e173..6fc4b07 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js +++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js @@ -5,7 +5,7 @@ import actions from 'app/actions' import { ROMAN_NUMERALS } from 'app/constants' import { Arrow } from './viewer.icons' import NavPlayer from './nav.player' -import { thumbnailURL, sectionProgressPercentage } from 'app/utils/annotation.utils' +import { thumbnailURL, sectionProgressPercentage, sectionOffsetSeconds } from 'app/utils/annotation.utils' class NavParent extends Component { state = { @@ -15,12 +15,14 @@ class NavParent extends Component { } constructor(props){ super(props) + this.navbarRef = React.createRef() this.handleMouseMove = this.handleMouseMove.bind(this) this.handleMouseEnter = this.handleMouseEnter.bind(this) this.handleMouseLeave = this.handleMouseLeave.bind(this) this.handleMouseEnterNext = this.handleMouseEnterNext.bind(this) this.handleMouseLeaveNext = this.handleMouseLeaveNext.bind(this) this.handleNavBarClick = this.handleNavBarClick.bind(this) + this.handleSectionLinkClick = this.handleSectionLinkClick.bind(this) this.goToNextSection = this.goToNextSection.bind(this) } handleMouseEnter(){ @@ -51,8 +53,18 @@ class NavParent extends Component { } handleNavBarClick(e) { e && e.stopPropagation() - actions.viewer.toggleComponent('nav') // console.log('>> CLICK NAV') + // actions.viewer.toggleComponent('nav') + const percent = (e.pageX / this.navbarRef.current.offsetWidth) + const seconds = sectionOffsetSeconds(this.props.currentSection, percent) + console.log(e.pageX, this.navbarRef.current.offsetWidth, percent) + console.log(this.props.currentSection) + console.log(">>", seconds) + actions.viewer.seekToTimestamp(seconds) + } + handleSectionLinkClick(e) { + e && e.stopPropagation() + actions.viewer.toggleComponent('nav') } handleMouseMove(e) { e && e.stopPropagation() @@ -71,24 +83,24 @@ class NavParent extends Component { this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: true }) } render() { - const { viewer, play_ts, started, playing } = this.props + const { viewer, currentSection, play_ts, started, playing } = this.props let containerClassName = "viewer-nav " + viewer.navStyle let navClassName = 'nav-row main-nav' if (this.state.hoveringNav || !started) containerClassName += ' hovering-nav' if ((this.state.hoveringNext || (viewer.atEndOfSection && !playing)) && !viewer.nav && viewer.nextSection) containerClassName += ' hovering-next' return ( - <div className={containerClassName} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}> + <div ref={this.navbarRef} className={containerClassName} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}> <div className={navClassName} onClick={this.handleNavBarClick}> <div className='nav-section-name' onMouseEnter={this.handleMouseEnter}> - <span className="section-link link"> + <span className="section-link link" onClick={this.handleSectionLinkClick}> <Arrow type={viewer.nav ? 'down' : 'up'} /> - {viewer.currentSection && ( + {currentSection && ( viewer.mediaTitle ? <span><i>{viewer.mediaTitle}</i></span> : <span> - {ROMAN_NUMERALS[viewer.currentSection.index]} + {ROMAN_NUMERALS[currentSection.index]} {'. '} - {viewer.currentSection.title} + {currentSection.title} </span> )} </span> @@ -99,11 +111,11 @@ class NavParent extends Component { <div className='nav-next' onMouseEnter={this.handleMouseEnter} - onClick={this.goToNextSection} > <span className="next-link link" onMouseEnter={this.handleMouseEnterNext} + onClick={this.goToNextSection} > {viewer.nextSection ? "Next" @@ -113,7 +125,7 @@ class NavParent extends Component { </span> </div> <div className="nav-progress-percentage" style={{ - width: viewer.currentSection ? sectionProgressPercentage(viewer.currentSection, play_ts) : 0 + width: currentSection ? sectionProgressPercentage(currentSection, play_ts) : 0 }} /> </div> {viewer.nextSection && @@ -134,6 +146,7 @@ class NavParent extends Component { const mapStateToProps = state => ({ viewer: state.viewer, + currentSection: state.viewer.currentSection, started: state.audio.started, playing: state.audio.playing, play_ts: state.audio.play_ts, diff --git a/animism-align/frontend/app/views/viewer/nav/nav.player.js b/animism-align/frontend/app/views/viewer/nav/nav.player.js index 75e53b4..43fa349 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.player.js +++ b/animism-align/frontend/app/views/viewer/nav/nav.player.js @@ -15,7 +15,7 @@ class NavPlayer extends Component { const { playing, play_ts, duration, volume } = this.props const className = playing ? 'nav-player playing' : 'nav-player' return ( - <div className={className} onClick={this.stopPropagation}> + <div className={className}> <PlayButton playing={playing} /> <PlayerTime play_ts={play_ts} duration={duration} /> <VolumeControl volume={volume} /> diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js index 6fa8f4e..c8eb68e 100644 --- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js +++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js @@ -38,14 +38,21 @@ export const Arrow = React.memo(({ type }) => ( // volume toggle -export const VolumeControl = React.memo(({ volume }) => ( - <div className={volume ? 'volume' : 'volume muted'} onClick={() => actions.audio.setVolume(volume ? 0.0 : 1.0)}> +export const VolumeControlIcon = ({ volume }) => ( + <div + className={volume ? 'volume' : 'volume muted'} + onClick={e => { + e && e.stopPropagation() + actions.audio.setVolume(volume ? 0.0 : 1.0) + }} + > <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 = React.memo(VolumeControlIcon) // play / pause button @@ -64,7 +71,10 @@ export const PlayButton = ({ playing }) => { return ( <div className={playing ? 'playToggle playing' : 'playToggle paused'} - onClick={() => playing ? actions.audio.pause() : actions.viewer.playFromClick()} + onClick={e => { + e && e.stopPropagation() + playing ? actions.audio.pause() : actions.viewer.playFromClick() + }} > {playing ? PauseIcon : PlayIcon} </div> 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 94dabc0..bff6894 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 @@ -111,13 +111,15 @@ .dots .dot-item.active { opacity: 1.0; } -/*.carousel.black .dots .dot-circle { +/* +.carousel.black .dots .dot-circle { background: #fff; } .carousel.black svg polygon { fill: #fff; } */ + /* carousel */ .inline-element:nth-child(2) .carousel-container { |