avoid hitting the dang tab key

1 files changed, 18 insertions, 6 deletions

diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index ea2f08c..779ec93 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -5,12 +5,16 @@ import { connect } from 'react-redux'
 
 import './viewer.fonts.css'
 import './viewer.css'
+import './viewer.nav.css'
+import './transcript/transcript.css'
 
 import actions from 'app/actions'
 import { Loader } from 'app/common'
 
 import Transcript from './transcript/transcript.container'
+import ViewerNav from './nav/viewer.nav'
 import ViewerRouter from './nav/viewer.router'
+import Player from './player/player.container'
 
 class ViewerContainer extends Component {
   constructor(props) {
@@ -46,13 +50,20 @@ class ViewerContainer extends Component {
     }
   }
   render() {
-    if (!this.props.loaded) {
-      return <div className='viewer body loading'><Loader /></div>
+    const { loaded, viewer } = this.props
+    if (!loaded) {
+      return <div className='viewer loading'><Loader /></div>
     }
     return (
-      <div className='viewer body'>
-        <Transcript />
-        <Route exact path='/viewer/:component/' component={ViewerRouter} />
+      <div>
+        <div className='viewer'>
+          <div className={viewer.transcript ? 'viewer-container transcript-open' : 'viewer-container'}>
+            <Player />
+            <ViewerNav />
+          </div>
+          <Transcript />
+          <Route exact path='/viewer/:component/' component={ViewerRouter} />
+        </div>
       </div>
     )
   }
@@ -63,7 +74,8 @@ const mapStateToProps = state => ({
     !!state.annotation.index.lookup &&
     !!state.paragraph.index.lookup &&
     !!state.media.index.lookup
-  )
+  ),
+  viewer: state.viewer,
 })
 
 const mapDispatchToProps = dispatch => ({