diff options
6 files changed, 45 insertions, 8 deletions
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 8602284..77de555 100644 --- a/animism-align/frontend/app/views/viewer/player/player.container.js +++ b/animism-align/frontend/app/views/viewer/player/player.container.js @@ -104,13 +104,11 @@ class PlayerContainer extends Component { } render() { - // const { } = this.props - const { currentSection } = this.props - if (!currentSection) { return <div /> } + if (!this.props.currentSection) { return <div /> } // console.log(currentSection) return ( <div className='viewer-container'> - <PlayerTranscript section={currentSection} /> + <PlayerTranscript /> <PlayerFullscreen /> </div> ) 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 a60eee9..a4ea7d3 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js @@ -115,6 +115,10 @@ class PlayerFullscreen extends Component { } // elements.reverse() this.setState({ elements, persist }) + // if fullscreen mode started or ended... + if (!!elements.length !== this.props.isFullscreen) { + actions.viewer.updateFullscreenStatus(!!elements.length, persist) + } } render() { @@ -191,6 +195,7 @@ const FirstChild = (props) => { const mapStateToProps = state => ({ currentSection: state.viewer.currentSection, + isFullscreen: state.viewer.isFullscreen, audio: state.audio, media: state.media.index, timeline: state.viewer.currentSection ? state.viewer.currentSection.fullscreenTimeline : [], 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 7a9d4aa..1743350 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.js +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js @@ -25,6 +25,26 @@ class PlayerTranscript extends Component { this.containerRef.current.scrollTo(0, 0) }, 20) } + if ( + this.props.currentSection.index === 0 && + this.props.isFullscreen && + this.props.isFullscreen !== prevProps.isFullscreen + ) { + console.log('fullscreen started for the first time') + this.scrollToTopOfSection() + } + } + + scrollToTopOfSection() { + const { current } = this.containerRef + console.log('scrollToTopOfSection', current) + if (!current) return + const heading = current.querySelector('.section_heading') + let offset = heading ? heading.offsetTop : 0 + console.log(heading, offset) + if (offset) { + current.scrollTo(0, offset) + } } handleAnnotationClick(e, paragraph, annotation) { @@ -50,7 +70,7 @@ class PlayerTranscript extends Component { if (isHandheld) { const isScrolledPastIntro = this.containerRef.current.scrollTop > 100 if (xor(this.props.viewer.navGradient, isScrolledPastIntro)) { - console.log('toggle nav gradient', isScrolledPastIntro) + // console.log('toggle nav gradient', isScrolledPastIntro) actions.viewer.toggleNavGradient(isScrolledPastIntro) } } @@ -64,7 +84,7 @@ class PlayerTranscript extends Component { } render() { - const { paragraphs, color, inlineParagraphCount } = this.props.section + const { paragraphs, color, inlineParagraphCount } = this.props.currentSection const className = "player-transcript " + color + " " + ( inlineParagraphCount > 2 ? 'scrollable' : 'not-scrollable' ) @@ -91,6 +111,7 @@ class PlayerTranscript extends Component { const mapStateToProps = state => ({ viewer: state.viewer, + currentSection: state.viewer.currentSection, }) export default connect(mapStateToProps)(PlayerTranscript) diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index 9131763..c1136e7 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -307,6 +307,12 @@ export const toggleNavGradient = value => dispatch => { dispatch({ type: types.viewer.toggle_component, key: 'navGradient', value: value }) } +export const updateFullscreenStatus = (value, persist) => dispatch => { + console.log('fullscreen', value, persist) + dispatch({ type: types.viewer.toggle_component, key: 'isFullscreen', value: value }) + dispatch({ type: types.viewer.toggle_component, key: 'isFullscreenPersist', value: persist }) +} + export const toggleComponent = key => dispatch => { hideNavElementsNotMatchedBy(key)(dispatch) const state = store.getState().viewer diff --git a/animism-align/frontend/app/views/viewer/viewer.mobile.css b/animism-align/frontend/app/views/viewer/viewer.mobile.css index b7676b6..9d5955c 100644 --- a/animism-align/frontend/app/views/viewer/viewer.mobile.css +++ b/animism-align/frontend/app/views/viewer/viewer.mobile.css @@ -60,9 +60,14 @@ .eflux-header { } + .eflux-header.white .eflux-logo svg path { + fill: #fff; + } + .eflux-header.white.gradient .eflux-logo svg path { + fill: #000; + } .site-intro { - height: calc(100vh - 4.5rem); - margin-top: 4.5rem; + height: calc(100vh); background-size: auto 105%; } .eflux-nav .transcript-icon { diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js index 6ec615a..1011d4e 100644 --- a/animism-align/frontend/app/views/viewer/viewer.reducer.js +++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js @@ -24,6 +24,8 @@ const initialState = { autoAdvance: false, atEndOfSection: false, onlyEnableFirstSection: isHandheld, + isFullscreen: false, + isFullscreenPersist: false, /* footnotes */ footnoteList: [], |