messaging if rest of chapters are disabled. grayscale all disabled media

2 files changed, 27 insertions, 2 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 6da6f76..f2f02d2 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -48,10 +48,20 @@ class EfluxChrome extends Component {
     }
   }
   render() {
-    const { navStyle, playing, transcriptOpen, growlOpen, growlMessage, atEndOfSection, currentSection } = this.props
+    const {
+      navStyle, navGradient,
+      playing, transcriptOpen,
+      growlOpen, growlMessage,
+      atEndOfSection, currentSection
+    } = this.props
     const showingTranscriptTooltip = ((atEndOfSection && currentSection.index === 0) || this.state.transcript)
+    let className = "eflux-header"
+    if (navStyle) className += ' ' + navStyle
+    if (navGradient) className += ' gradient'
+    if (transcriptOpen) className += ' transcript-open'
     return (
-      <div className={"eflux-header " + navStyle + (transcriptOpen ? ' transcript-open' : '')}>
+      <div className={className}>
+        <div className="eflux-gradient" />
         <div className="eflux-logo">
           <a
             href={URLS.eflux_logo}
@@ -99,6 +109,7 @@ class EfluxChrome extends Component {
 
 const mapStateToProps = state => ({
   navStyle: state.viewer.navStyle,
+  navGradient: state.viewer.navGradient,
   playing: state.audio.playing,
   transcriptOpen: state.viewer.transcript,
   growlOpen: state.viewer.growlOpen,
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index e25cb09..eb7f973 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -9,6 +9,20 @@
 .eflux-header.transcript-open {
   width: calc(100vw - 31.875rem);
 }
+.eflux-gradient {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%;
+  height: 4.5rem;
+  pointer-events: none;
+  background-image: linear-gradient(0deg, rgba(255,255,255,0.0), rgba(255,255,255,1.0));
+  opacity: 0.0;
+  transition: opacity 2.0s;
+  z-index: 0;
+}
+.gradient .eflux-gradient {
+  opacity: 1.0;
+}
 .eflux-logo {
   position: absolute;
   top: 20px;