diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/nav')
4 files changed, 55 insertions, 13 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js index 40c8365..f8c2892 100644 --- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js +++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js @@ -7,13 +7,16 @@ import { import { PlayButton } from './viewer.icons' import actions from 'app/actions' -const EfluxChrome = React.memo(({ navStyle, playing, transcriptOpen }) => ( +const EfluxChrome = React.memo(({ navStyle, playing, transcriptOpen, started, growlOpen, growlMessage }) => ( <div className={"eflux-header " + navStyle + (transcriptOpen ? ' transcript-open' : '')}> <div className="eflux-logo"> <a href="/"> {EfluxLogo} </a> </div> + <div className={growlOpen ? "growl-message open" : "growl-message"}> + {growlMessage} + </div> <div className="eflux-nav"> <PlayButton playing={playing} /> <div className="transcript-icon" onClick={() => actions.viewer.toggleComponent('transcript')}> @@ -27,6 +30,8 @@ const mapStateToProps = state => ({ navStyle: state.viewer.navStyle, playing: state.audio.playing, transcriptOpen: state.viewer.transcript, + growlOpen: state.viewer.growlOpen, + growlMessage: state.viewer.growlMessage, }) export default connect(mapStateToProps)(EfluxChrome) diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css index 487c04e..fe57779 100644 --- a/animism-align/frontend/app/views/viewer/nav/eflux.css +++ b/animism-align/frontend/app/views/viewer/nav/eflux.css @@ -75,3 +75,18 @@ .eflux-logo.black svg line { stroke: #fff; } + +.growl-message { + position: absolute; + top: 0; left: 50%; + transition: transform 0.2s; + transform: translateZ(0) translateY(-5rem) translateX(-50%); + background: black; + color: white; + border: 1px solid; + padding: 0.75rem; + margin-top: 1rem; +} +.growl-message.open { + transform: translateZ(0) translateY(0) translateX(-50%); +}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css index 922bd01..a6b9a3b 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.css +++ b/animism-align/frontend/app/views/viewer/nav/nav.css @@ -14,7 +14,7 @@ transform: translateZ(0) translateY(0); border-top: 1px solid transparent; } -.main-nav.hovering-nav { +.viewer-nav.hovering-nav .main-nav { background: black; color: white; } @@ -110,6 +110,24 @@ transform: translateZ(0) translateY(-9rem); } +/* Inverse progress bar */ + +.nav-progress-percentage { + position: absolute; + bottom: 0; + left: 0; + height: calc(3rem - 1px); + pointer-events: none; + backdrop-filter: invert(0%); + transition: opacity 0.2s, backdrop-filter 0.2s, width 0.25s linear; + opacity: 0; +} +.nav-open .nav-progress-percentage, +.viewer-nav.hovering-nav .nav-progress-percentage { + backdrop-filter: invert(100%); + opacity: 1; +} + /* Arrows */ .arrow svg { @@ -139,8 +157,8 @@ } .viewer-nav.black .arrow path, .viewer-nav.black .arrow polygon, -.viewer-nav .main-nav.hovering-nav .arrow path, -.viewer-nav .main-nav.hovering-nav .arrow polygon, +.viewer-nav.hovering-nav .main-nav .arrow path, +.viewer-nav.hovering-nav .main-nav .arrow polygon, .nav-open .viewer-nav .arrow path, .nav-open .viewer-nav .arrow polygon, .checklist-open .viewer-nav .arrow path, @@ -157,7 +175,7 @@ .nav-player.playing { opacity: 0.0; } -.main-nav.hovering-nav .nav-player.playing, +.viewer-nav.hovering-nav .nav-player.playing, .nav-open .nav-player.playing { opacity: 1.0; } @@ -177,11 +195,11 @@ stroke: #000; stroke-width: 0.5; } -.main-nav.hovering-nav .volume path, +.viewer-nav.hovering-nav .volume path, .nav-open .volume path { fill: #fff; } -.main-nav.hovering-nav .volume.muted path, +.viewer-nav.hovering-nav .volume.muted path, .nav-open .volume.muted path { fill: #000; stroke: #fff; @@ -198,8 +216,8 @@ .playToggle polygon { fill: #000; } -.main-nav.hovering-nav .playToggle path, -.main-nav.hovering-nav .playToggle polygon, +.viewer-nav.hovering-nav .playToggle path, +.viewer-nav.hovering-nav .playToggle polygon, .nav-open .playToggle path, .nav-open .playToggle polygon { fill: #fff; 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 8ad0cd1..ca1c148 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 } from 'app/utils/annotation.utils' +import { thumbnailURL, sectionProgressPercentage } from 'app/utils/annotation.utils' class NavParent extends Component { state = { @@ -38,11 +38,11 @@ class NavParent extends Component { }, 50) } render() { - const { viewer } = this.props + const { viewer, play_ts } = this.props let containerClassName = "viewer-nav " + viewer.navStyle let navClassName = 'nav-row main-nav' - if (this.state.hoveringNav) navClassName += ' hovering-nav' - if (this.state.hoveringNext || viewer.atEndOfSection) containerClassName += ' hovering-next' + if (this.state.hoveringNav) containerClassName += ' hovering-nav' + if ((this.state.hoveringNext || viewer.atEndOfSection) && !viewer.nav) containerClassName += ' hovering-next' return ( <div className={containerClassName} onMouseLeave={this.handleMouseLeave}> <div className={navClassName}> @@ -73,6 +73,9 @@ class NavParent extends Component { </span> } </div> + <div className="nav-progress-percentage" style={{ + width: viewer.currentSection ? sectionProgressPercentage(viewer.currentSection, play_ts) : 0 + }} /> </div> {viewer.nextSection && <div className="next-section-thumbnail" @@ -91,6 +94,7 @@ class NavParent extends Component { const mapStateToProps = state => ({ viewer: state.viewer, + play_ts: state.audio.play_ts, }) export default connect(mapStateToProps)(NavParent) |