player showing/hiding

4 files changed, 25 insertions, 10 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index b28996a..79dc11b 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -11,7 +11,7 @@
   transform: translateZ(0) translateY(0);
   border-top: 1px solid transparent;
 }
-.sections-open .main-nav {
+.nav-open .main-nav {
   transform: translateZ(0) translateY(-22rem);
   border-top: 1px solid #fff;
   background: black;
@@ -85,11 +85,25 @@
 .viewer-nav .arrow polygon {
   fill: #000;
 }
-.sections-open .viewer-nav .arrow path,
-.sections-open .viewer-nav .arrow polygon {
+.nav-open .viewer-nav .arrow path,
+.nav-open .viewer-nav .arrow polygon {
   fill: #fff;
 }
 
+/* Player */
+
+.nav-player {
+  transition: opacity 0.2s;
+  opacity: 1.0;
+}
+.nav-player.playing {
+  opacity: 0.0;
+}
+.main-nav:hover .nav-player.playing,
+.nav-open .nav-player.playing {
+  opacity: 1.0;
+}
+
 /* Volume button */
 
 .volume {
@@ -105,10 +119,10 @@
   stroke: #000;
   stroke-width: 0.5;
 }
-.sections-open .volume path {
+.nav-open .volume path {
   fill: #fff;
 }
-.sections-open .volume.muted path {
+.nav-open .volume.muted path {
   fill: #000;
   stroke: #fff;
 }
@@ -124,8 +138,8 @@
 .playToggle polygon {
   fill: #000;
 }
-.sections-open .playToggle path,
-.sections-open .playToggle polygon {
+.nav-open .playToggle path,
+.nav-open .playToggle polygon {
   fill: #fff;
 }
 
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.player.js b/animism-align/frontend/app/views/viewer/nav/nav.player.js
index a19f1c9..d4d5d8c 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.player.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.player.js
@@ -6,8 +6,9 @@ import { PlayButton, PlayerTime, VolumeControl } from './viewer.icons'
 class NavPlayer extends Component {
   render() {
     const { playing, play_ts, duration, volume } = this.props
+    const className = playing ? 'nav-player playing' : 'nav-player'
     return (
-      <div className='nav-player'>
+      <div className={className}>
         <PlayButton playing={playing} />
         <PlayerTime play_ts={play_ts} duration={duration} />
         <VolumeControl volume={volume} />
diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index e18d2cc..e107d3f 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -13,7 +13,7 @@
   transform: translateZ(0) translateY(25rem);
   border-top: 1px solid #fff;
 }
-.sections-open .viewer-sections {
+.nav-open .viewer-sections {
   transform: translateZ(0) translateY(0);
 }
 .viewer-sections .viewer-section {
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index 20ee208..bc1a1fc 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -61,7 +61,7 @@ class ViewerContainer extends Component {
     }
     let className = 'viewer'
     if (viewer.transcript) className += ' transcript-open'
-    if (viewer.nav) className += ' sections-open'
+    if (viewer.nav) className += ' nav-open'
     return (
       <div>
         <div className='viewer-parent'>