intro caption, keeping nav darkened until playback starts

3 files changed, 6 insertions, 4 deletions

diff --git a/animism-align/frontend/app/views/audio/audio.reducer.js b/animism-align/frontend/app/views/audio/audio.reducer.js
index 35a364d..c88d6f9 100644
--- a/animism-align/frontend/app/views/audio/audio.reducer.js
+++ b/animism-align/frontend/app/views/audio/audio.reducer.js
@@ -2,6 +2,7 @@ import * as types from 'app/types'
 import { session, getDefault, getDefaultInt } from 'app/session'
 
 const initialState = {
+  started: false,
   playing: false,
   play_ts: 0,
   volume: 1.0,
@@ -13,6 +14,7 @@ export default function alignReducer(state = initialState, action) {
     case types.audio.play:
       return {
         ...state,
+        started: true,
         playing: true,
       }
     case types.audio.pause:
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 ca1c148..5ddc13d 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -38,10 +38,10 @@ class NavParent extends Component {
     }, 50)
   }
   render() {
-    const { viewer, play_ts } = this.props
+    const { viewer, play_ts, started } = this.props
     let containerClassName = "viewer-nav " + viewer.navStyle
     let navClassName = 'nav-row main-nav'
-    if (this.state.hoveringNav) containerClassName += ' hovering-nav'
+    if (this.state.hoveringNav || !started) containerClassName += ' hovering-nav'
     if ((this.state.hoveringNext || viewer.atEndOfSection) && !viewer.nav) containerClassName += ' hovering-next'
     return (
       <div className={containerClassName} onMouseLeave={this.handleMouseLeave}>
@@ -94,6 +94,7 @@ class NavParent extends Component {
 
 const mapStateToProps = state => ({
   viewer: state.viewer,
+  started: state.audio.started,
   play_ts: state.audio.play_ts,
 })
 
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 4f0ce71..2d2e3cb 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
@@ -2,8 +2,7 @@ import React, { Component } from 'react'
 
 import { MediaCitation } from '../components.media'
 
-export const Intro = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
-  let className = 'site-intro'
+export const Intro = ({ paragraph, media, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
   // console.log(item)