diff options
17 files changed, 437 insertions, 235 deletions
diff --git a/animism-align/frontend/app/views/viewer/forms/forms.css b/animism-align/frontend/app/views/viewer/forms/forms.css new file mode 100644 index 0000000..5e9d698 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/forms/forms.css @@ -0,0 +1,49 @@ +/* form in transcript */ + +.player-transcript .subscription-form { + font-family: "Freight Text", serif; + font-size: 3.5rem; + line-height: 1; + width: 80%; + max-width: 70rem; + margin: 0 auto; + margin-top: 4rem; + margin-bottom: 13rem; + position: relative; +} +.player-transcript .subscription-form input { + font-family: "Freight Text", serif; + font-size: 3.5rem; + border-bottom: 1px solid #000; + color: black; + line-height: 1; + background: transparent; + border: 0; + padding: 0; + width: 100%; +} +.player-transcript .subscription-form input::placeholder { + color: #bbb; + border-bottom: 1px solid #bbb; +} +.player-transcript .subscription-form input[type='email']:invalid { + border-bottom: 1px solid #bbb; +} +.player-transcript .subscription-form input:focus, +.player-transcript .subscription-form input:focus:invalid { + background: transparent; + border: 0; + outline: 0; + color: #000; + border-bottom: 1px solid #000; +} +.player-transcript .subscription-form svg { + position: absolute; + bottom: 0; + right: -1rem; + width: 2.5rem; + height: 2.5rem; +} +.player-transcript .subscription-form svg polygon { + fill: #666; +} diff --git a/animism-align/frontend/app/views/viewer/forms/subscription.form.js b/animism-align/frontend/app/views/viewer/forms/subscription.form.js new file mode 100644 index 0000000..3d863cb --- /dev/null +++ b/animism-align/frontend/app/views/viewer/forms/subscription.form.js @@ -0,0 +1,49 @@ +import React, { Component } from 'react' + +import { Arrow } from '../nav/viewer.icons' + +export default class SubscriptionForm extends Component { + state = { + email: "", + } + constructor(props) { + super(props) + this.handleChange = this.handleChange.bind(this) + this.handleKeyDown = this.handleKeyDown.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + } + handleChange(e) { + this.setState({ email: e.target.value }) + } + handleKeyDown(e) { + // disable tab + if (e.keyCode === 9) { + e.preventDefault() + } + } + handleSubmit(e) { + e.preventDefault() + } + render() { + return ( + <form className="subscription-form" onSubmit={this.handleSubmit}> + <div className="subscription-callout"> + Stay up to date and get notified when the next episode is available + </div> + <input + required + type="email" + name="email" + value={this.state.email} + placeholder="Email address here" + autoCorrect="off" + autoCapitalize="off" + spellCheck="false" + onKeyDown={this.handleKeyDown} + onChange={this.handleChange} + /> + <Arrow type='right' /> + </form> + ) + } +}
\ 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 f84470f..4738493 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.css +++ b/animism-align/frontend/app/views/viewer/nav/nav.css @@ -73,7 +73,11 @@ align-items: center; cursor: pointer; } -.viewer-nav .link span { +.viewer-nav .link > span { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; @@ -83,6 +87,13 @@ padding-right: 1.25rem; } +.viewer-nav .link > span.replay-link { + display: inline-block; + max-width: 30vw; + overflow: hidden; + text-overflow: ellipsis; +} + .viewer-nav .next-section-thumbnail { position: absolute; right: 0; @@ -128,57 +139,6 @@ opacity: 1; } -/* Share box */ - -.nav-share { - position: absolute; - bottom: 3rem; - left: 0; - width: 20rem; - transform: translateY(30rem); - transition: opacity 0.01s, transform 0.2s; - padding: 0.5rem 1.5rem; - background: black; - border: 1px solid white; - color: white; - font-size: 18px; - /*opacity: 0;*/ -} -.checklist-open .nav-share { - top: 3rem; - z-index: 21; - transform: translateY(-30rem); - bottom: auto; -} -.share-open .nav-share { - transform: translateY(0); - opacity: 1; -} -.nav-share a { - color: white; - text-decoration: none; -} -.nav-share .share-success { - display: none; -} -.nav-share.copying .share-success { - margin-left: 1rem; - display: inline; - opacity: 1; - color: white; - font-size: 0.75rem; -} -.nav-share.copying.copied .share-success { - opacity: 0; - transition: opacity 1.0s 1.0s; -} -.nav-share .share-option { - padding: 0.5rem 0; -} -.nav-share .share-copy { - cursor: pointer; -} - /* Arrows */ .arrow svg { 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 c73ab7a..80340c8 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js +++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js @@ -80,7 +80,10 @@ class NavParent extends Component { onMouseEnter={this.handleMouseEnterNext} onClick={this.goToNextSection} > - {viewer.credits ? "Replay Episode 1. Animist Origins & Export Projections" : "Next"} + {viewer.credits + ? <span className="replay-link">{'Replay Episode 1. Animist Origins & Export Projections'}</span> + : "Next" + } <Arrow type={'right'} /> </span> </div> diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js index a9df389..4235ed1 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js @@ -187,31 +187,12 @@ const CreditsVenue = ({ venue }) => { </div> </div> )} - </div> )} </div> ) } -export const SubscriptionForm = () => { - return ( - <form className="subscription-form"> - Stay up to date and get notified when the next episode is available - <input - required - type="email" - name="email" - placeholder="Email address here" - autoCorrect="off" - autoCapitalize="off" - spellCheck="false" - /> - <Arrow type='right' /> - </form> - ) -} - const mapStateToProps = state => ({ episodes: state.episode.index, venues: state.venue.index, diff --git a/animism-align/frontend/app/views/viewer/player/player.credits.js b/animism-align/frontend/app/views/viewer/player/player.credits.js index f8a0fa8..7a44d57 100644 --- a/animism-align/frontend/app/views/viewer/player/player.credits.js +++ b/animism-align/frontend/app/views/viewer/player/player.credits.js @@ -3,9 +3,10 @@ import React, { Component } from 'react' import { Schedule, Credits, - SubscriptionForm, } from './components.inline/inline.utility' +import SubscriptionForm from '../forms/subscription.form' + export default class PlayerCredits extends Component { render() { return ( diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css index 927d2c1..72faf7b 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -385,53 +385,3 @@ .venue-info .credits-info div { min-height: 0.875rem; } - -/* subscription form */ - -.subscription-form { - font-family: "Freight Text", serif; - font-size: 3.5rem; - line-height: 1; - width: 80%; - max-width: 70rem; - margin: 0 auto; - margin-top: 4rem; - margin-bottom: 13rem; - position: relative; -} -.subscription-form input { - font-family: "Freight Text", serif; - font-size: 3.5rem; - line-height: 1; - background: transparent; - border: 0; - padding: 0; - width: 100%; - border-bottom: 1px solid #000; - color: black; -} -.subscription-form input::placeholder { - color: #bbb; - border-bottom: 1px solid #bbb; -} -.subscription-form input[type='email']:invalid { - border-bottom: 1px solid #bbb; -} -.subscription-form input:focus, -.subscription-form input:focus:invalid { - background: transparent; - border: 0; - outline: 0; - color: #000; - border-bottom: 1px solid #000; -} -.subscription-form svg { - position: absolute; - bottom: 0; - right: -1rem; - width: 2.5rem; - height: 2.5rem; -} -.subscription-form svg polygon { - fill: #666; -}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css index 4858d7a..b357efe 100644 --- a/animism-align/frontend/app/views/viewer/sections/sections.css +++ b/animism-align/frontend/app/views/viewer/sections/sections.css @@ -4,13 +4,13 @@ position: absolute; bottom: 0; left: 0; + height: 22rem; width: 100%; background: black; color: white; display: block; transition: transform 0.2s; transform: translateZ(0) translateY(25rem); - border-top: 1px solid #fff; } .nav-open .viewer-sections { transform: translateZ(0) translateY(0); @@ -19,15 +19,46 @@ transform: translateZ(0) translateY(calc(3rem - 100vh)); z-index: 20; } + +/* sections nav */ + .sections-nav { z-index: 22; + border-top: 1px solid white; + background: black; +} +.sections-nav.viewer-nav > .nav-row { + z-index: 24; + background: black; + padding: 0; +} +.sections-nav .link { + position: relative; + height: 3rem; + padding: 0.25rem 1rem 0.25rem 0.25rem; +} +.sections-nav .subscribe-link { + border-right: 1px solid white; +} +.sections-nav .share-link { + border-right: 1px solid white; +} +.sections-nav .footnotes-link { + border-left: 1px solid white; +} +.sections-nav .transcript-link { + padding-left: 1rem; + border-left: 1px solid white; } /* scrolling part */ .viewer-sections .viewer-sections-scroll { + position: absolute; + top: 0; + left: 0; width: 100%; - height: 22rem; + height: 19rem; white-space: nowrap; overflow-x: scroll; overflow-y: hidden; @@ -35,25 +66,6 @@ .checklist-open .viewer-sections .viewer-sections-scroll { overflow-x: hidden; } -.viewer-sections-scroll::-webkit-scrollbar { - cursor: pointer; - user-select: none; - height: 4px; - width: 4px; -} -.viewer-sections-scroll::-webkit-scrollbar-button { - display: block; - width: 0; - height: 0; -} -.viewer-sections-scroll::-webkit-scrollbar-track-piece { - background: rgba(211,211,211,0.8); -} -.viewer-sections-scroll::-webkit-scrollbar-thumb { - display: block; - background: #000; -} - /* clickable section indicators */ @@ -128,4 +140,16 @@ left: 0; height: 3px; background: #fff; -}
\ No newline at end of file +} + +/* Boxes that emerge from the nav */ + +.nav-return { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + position: relative; + left: -0.5rem; + padding: 0.5rem 0 0.2rem 0; +} diff --git a/animism-align/frontend/app/views/viewer/sections/share.css b/animism-align/frontend/app/views/viewer/sections/share.css new file mode 100644 index 0000000..ae5dd53 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/sections/share.css @@ -0,0 +1,54 @@ +/* share box */ + +.nav-share { + position: absolute; + bottom: 0; + left: 0; + width: 20rem; + transform: translateY(30rem) translateZ(0); + transition: opacity 0.01s, transform 0.2s; + padding: 0.5rem 0.75rem 0 0.75rem; + background: black; + border-top: 1px solid white; + border-right: 1px solid white; + color: white; + font-size: 18px; +} +.checklist-open .nav-share { + top: 0rem; + z-index: 21; + transform: translateY(-30rem) translateZ(0); + border-top: 0; + border-bottom: 1px solid white; + bottom: auto; +} +.share-open .nav-share { + transform: translateY(0) translateZ(0); + opacity: 1; + z-index: 10; +} + +.nav-share a { + color: white; + text-decoration: none; +} +.nav-share .share-success { + display: none; +} +.nav-share.copying .share-success { + margin-left: 1rem; + display: inline; + opacity: 1; + color: white; + font-size: 0.75rem; +} +.nav-share.copying.copied .share-success { + opacity: 0; + transition: opacity 1.0s 1.0s; +} +.nav-share .share-option { + padding: 0.5rem 0; +} +.nav-share .share-copy { + cursor: pointer; +} diff --git a/animism-align/frontend/app/views/viewer/sections/subscribe.css b/animism-align/frontend/app/views/viewer/sections/subscribe.css new file mode 100644 index 0000000..9c27614 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/sections/subscribe.css @@ -0,0 +1,69 @@ +/* subscription form */ + +.nav-subscribe { + position: absolute; + bottom: 0; + left: -1px; + width: 35rem; + transform: translateY(30rem) translateZ(0); + transition: opacity 0.01s, transform 0.2s; + padding: 0.5rem 0.75rem 0 0.75rem; + background: black; + border-top: 1px solid white; + border-right: 1px solid white; + border-left: 1px solid white; + color: white; + font-size: 18px; +} +.checklist-open .nav-subscribe { + top: 0rem; + z-index: 21; + transform: translateY(-30rem) translateZ(0); + border-top: 0; + border-bottom: 1px solid white; + bottom: auto; +} +.subscribe-open .nav-subscribe { + transform: translateY(0) translateZ(0); + opacity: 1; + z-index: 10; +} + +/* subscription form */ + +.nav-subscribe .subscription-form { + width: 100%; + white-space: normal; + position: relative; +} +.nav-subscribe .subscription-form input { + font-size: 18px; + background: transparent; + border: 0; + padding: 5px 0; + width: 100%; + color: #fff; +} +.nav-subscribe .subscription-form input::placeholder { + color: #888; +} +.nav-subscribe .subscription-form input:focus, +.nav-subscribe .subscription-form input:focus:invalid { + background: transparent; + border: 0; + outline: 0; + color: #fff; +} +.nav-subscribe .subscription-form .arrow { + position: absolute; + bottom: -0.25rem; + right: -1rem; + width: 2.5rem; + height: 2.5rem; +} +.nav-subscribe .subscription-form svg polygon { + fill: #666; +} +.nav-subscribe .subscription-callout { + width: 30rem; +}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js index 8e6f39b..a2f906c 100644 --- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js @@ -1,91 +1,15 @@ import React, { Component } from 'react' -// import { Link } from 'react-router-dom' -import { connect } from 'react-redux' -import actions from 'app/actions' import ViewerSectionsNav from './viewer.sections.nav' -import { ROMAN_NUMERALS, CURTAIN_COLOR_LOOKUP } from 'app/constants' -import { clamp, timestamp, floatInRange, floatLT } from 'app/utils' -import { thumbnailURL, sectionProgressPercentage } from 'app/utils/annotation.utils' -import { SpeakerIcon } from '../nav/viewer.icons' +import ViewerSectionsList from './viewer.sections.list' -class ViewerSections extends Component { - constructor(props) { - super(props) - this.scrollRef = React.createRef() - this.handleWheel = this.handleWheel.bind(this) - } - shouldComponentUpdate(nextProps) { - if (nextProps.nav !== this.props.nav) return true - return nextProps.nav - } - handleWheel(e) { - let delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX - this.scrollRef.current.scrollLeft += delta - } +export default class ViewerSections extends Component { render() { - const { play_ts, sections, currentSection } = this.props return ( <div className="viewer-sections"> - <div - ref={this.scrollRef} - className="viewer-sections-scroll" - onWheel={e => this.handleWheel(e)} - > - {sections.map(section => { - // console.log(section) - const media = section.media.length ? section.media[0].media : null - const { no_audio, section_nav_color } = section - const progress = sectionProgressPercentage(section, play_ts) - return ( - <div - className={(!currentSection || section.index === currentSection.index) ? "viewer-section current-section" : "viewer-section"} - key={section.index} - onClick={() => actions.viewer.seekToSection(section)} - > - <div> - <div className="section-thumbnail" style={{ - backgroundImage: media && 'url(' + thumbnailURL(media) + ')', - }}> - {!no_audio && - <div className={"section-duration-" + section_nav_color}> - <div className="section-duration"> - {timestamp(section.duration)} - </div> - <div className="section-has-audio"> - {SpeakerIcon} - </div> - <div className="section-progress-bar"> - <div className="section-progress" - style={{ width: progress }} - /> - </div> - </div> - } - </div> - <div className="section-title"> - {ROMAN_NUMERALS[section.index]}<br /> - {section.title} - </div> - <div className="section-media"> - {section.mediaLabels} - </div> - </div> - </div> - ) - })} - </div> + <ViewerSectionsList /> <ViewerSectionsNav /> </div> ) } } - -const mapStateToProps = state => ({ - nav: state.viewer.nav, - play_ts: state.audio.play_ts, - sections: state.viewer.sections, - currentSection: state.viewer.currentSection, -}) - -export default connect(mapStateToProps)(ViewerSections) diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js new file mode 100644 index 0000000..34a944d --- /dev/null +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js @@ -0,0 +1,86 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' + +import actions from 'app/actions' +import { ROMAN_NUMERALS } from 'app/constants' +import { timestamp } from 'app/utils' +import { thumbnailURL, sectionProgressPercentage } from 'app/utils/annotation.utils' +import { SpeakerIcon } from '../nav/viewer.icons' + +class ViewerSectionsList extends Component { + constructor(props) { + super(props) + this.scrollRef = React.createRef() + this.handleWheel = this.handleWheel.bind(this) + } + shouldComponentUpdate(nextProps) { + if (nextProps.nav !== this.props.nav) return true + return nextProps.nav + } + handleWheel(e) { + let delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX + this.scrollRef.current.scrollLeft += delta + } + render() { + const { play_ts, sections, currentSection } = this.props + return ( + <div + ref={this.scrollRef} + className="viewer-sections-scroll" + onWheel={e => this.handleWheel(e)} + > + {sections.map(section => { + // console.log(section) + const media = section.media.length ? section.media[0].media : null + const { no_audio, section_nav_color } = section + const progress = sectionProgressPercentage(section, play_ts) + return ( + <div + className={(!currentSection || section.index === currentSection.index) ? "viewer-section current-section" : "viewer-section"} + key={section.index} + onClick={() => actions.viewer.seekToSection(section)} + > + <div> + <div className="section-thumbnail" style={{ + backgroundImage: media && 'url(' + thumbnailURL(media) + ')', + }}> + {!no_audio && + <div className={"section-duration-" + section_nav_color}> + <div className="section-duration"> + {timestamp(section.duration)} + </div> + <div className="section-has-audio"> + {SpeakerIcon} + </div> + <div className="section-progress-bar"> + <div className="section-progress" + style={{ width: progress }} + /> + </div> + </div> + } + </div> + <div className="section-title"> + {ROMAN_NUMERALS[section.index]}<br /> + {section.title} + </div> + <div className="section-media"> + {section.mediaLabels} + </div> + </div> + </div> + ) + })} + </div> + ) + } +} + +const mapStateToProps = state => ({ + nav: state.viewer.nav, + play_ts: state.audio.play_ts, + sections: state.viewer.sections, + currentSection: state.viewer.currentSection, +}) + +export default connect(mapStateToProps)(ViewerSectionsList) diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js index 5a2971b..56046c3 100644 --- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js @@ -4,6 +4,8 @@ import { connect } from 'react-redux' import actions from 'app/actions' import { Arrow } from '../nav/viewer.icons' +import ViewerSectionsShare from './viewer.sections.share' +import ViewerSectionsSubscribe from './viewer.sections.subscribe' class ViewerSectionsNav extends Component { render() { @@ -12,21 +14,37 @@ class ViewerSectionsNav extends Component { <div className="viewer-nav sections-nav"> <div className='nav-row'> <div> - <span className="share-link link" onClick={() => actions.viewer.toggleComponent('share')}> - <Arrow type={viewer.checklist ? 'down' : 'up'} /> - {'Share'} - </span> + <div className="share-link link"> + <ViewerSectionsShare /> + <span onClick={() => actions.viewer.toggleComponent('share')}> + <Arrow type={'up'} /> + {'Share'} + </span> + </div> + <div className="subscribe-link link"> + <ViewerSectionsSubscribe /> + <span onClick={() => actions.viewer.toggleComponent('subscribe')}> + <Arrow type={viewer.subscribe ? 'down' : 'up'} /> + {'Subscribe'} + </span> + </div> </div> <div> - <span className="checklist-link link" onClick={() => actions.viewer.toggleComponent('checklist')}> + <div className="checklist-link link" onClick={() => actions.viewer.toggleComponent('checklist')}> <Arrow type={viewer.checklist ? 'down': 'up'} /> {'Checklist'} - </span> + </div> </div> <div> - <span className="transcript-link link" onClick={() => actions.viewer.openTranscript()}> + <div className="footnotes-link link"> + <span onClick={() => actions.viewer.toggleComponent('footnotes')}> + <Arrow type={viewer.footnotes ? 'down' : 'up'} /> + {'Footnotes'} + </span> + </div> + <div className="transcript-link link" onClick={() => actions.viewer.openTranscript()}> {'Transcript'} - </span> + </div> </div> </div> </div> diff --git a/animism-align/frontend/app/views/viewer/nav/nav.share.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.share.js index 1e32860..607d4d5 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.share.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.share.js @@ -1,8 +1,10 @@ import React, { Component } from 'react' +import actions from 'app/actions' import { writeToClipboard } from 'app/utils' +import { Arrow } from '../nav/viewer.icons' -export default class NavShare extends Component { +export default class ViewerSectionsShare extends Component { state = { copied: false, } @@ -59,6 +61,10 @@ export default class NavShare extends Component { <span className="share-success">success</span> </div> </div> + <div className="nav-return" onClick={() => actions.viewer.hideComponent('share')}> + <Arrow type={'down'} /> + {'Share'} + </div> </div> ) } diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.subscribe.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.subscribe.js new file mode 100644 index 0000000..24ccf99 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.subscribe.js @@ -0,0 +1,21 @@ +import React, { Component } from 'react' + +import actions from 'app/actions' +import { Arrow } from '../nav/viewer.icons' +import SubscriptionForm from '../forms/subscription.form' + +export default class ViewerSectionsShare extends Component { + render() { + return ( + <div className='nav-subscribe'> + <div> + <SubscriptionForm /> + </div> + <div className="nav-return" onClick={() => actions.viewer.hideComponent('subscribe')}> + <Arrow type={'down'} /> + {'Subscribe'} + </div> + </div> + ) + } +} diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js index 61e095d..ea271d5 100644 --- a/animism-align/frontend/app/views/viewer/viewer.container.js +++ b/animism-align/frontend/app/views/viewer/viewer.container.js @@ -7,9 +7,12 @@ import './viewer.css' import './nav/nav.css' import './nav/eflux.css' import './sections/sections.css' +import './sections/share.css' +import './sections/subscribe.css' import './transcript/transcript.css' import './checklist/checklist.css' import './modals/modals.css' +import './forms/forms.css' import './player/player.container.css' import './player/player.fullscreen.css' import './player/player.transcript.css' @@ -21,7 +24,6 @@ import NavParent from './nav/nav.parent' import ViewerSections from './sections/viewer.sections' import ViewerRouter from './nav/viewer.router' import EfluxChrome from './nav/eflux.chrome' -import NavShare from './nav/nav.share' import Player from './player/player.container' import Transcript from './transcript/transcript.container' import Checklist from './checklist/checklist.container' @@ -42,6 +44,10 @@ class ViewerContainer extends Component { } if (viewer.share) { className += ' share-open' + } else if (viewer.subscribe) { + className += ' subscribe-open' + } else if (viewer.footnotes) { + className += ' footnotes-open' } return ( <div> @@ -53,7 +59,6 @@ class ViewerContainer extends Component { <ViewerSections /> <Transcript /> <Checklist /> - <NavShare /> <Route exact path='/viewer/:component/' component={ViewerRouter} /> </div> <VitrineModal /> diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js index 24ef24d..bb36d61 100644 --- a/animism-align/frontend/app/views/viewer/viewer.reducer.js +++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js @@ -8,6 +8,8 @@ const initialState = { nav: false, share: false, credits: false, + subscribe: false, + footnotes: false, /* section look and navigation */ sections: { loading: true }, |