invert nav color if background is black

10 files changed, 105 insertions, 10 deletions

diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js
index 8418bb5..6822d20 100644
--- a/animism-align/frontend/app/types.js
+++ b/animism-align/frontend/app/types.js
@@ -25,7 +25,8 @@ export const audio = with_type('audio', [
 ])
 
 export const viewer = with_type('viewer', [
-  'load_sections', 'toggle_component', 'set_current_section',
+  'load_sections', 'toggle_component',
+  'set_current_section', 'set_nav_style',
 ])
 
 export const site = with_type('site', [
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 8d04e8b..c66cf21 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -1,18 +1,22 @@
 import React from 'react'
 
-const EfluxChrome = React.memo(() => (
-  <div className="eflux-header">
+import {
+  EfluxLogo, EfluxClose, EfluxMenu
+} from './eflux.icons'
+
+const EfluxChrome = React.memo(({ navStyle }) => (
+  <div className={"eflux-header " + navStyle}>
     <div className="eflux-logo">
       <a href="/">
-        <img src="/static/img/elements/e-flux-logo.svg" />
+        {EfluxLogo}
       </a>
     </div>
     <div className="eflux-nav">
       <a href="/">
-        <img src="/static/img/elements/close.svg" />
+        {EfluxClose}
       </a>
       <a href="/">
-        <img src="/static/img/elements/menu.svg" />
+        {EfluxMenu}
       </a>
     </div>
   </div>
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index 93c9449..d04b85c 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -10,7 +10,12 @@
   top: 20px;
   left: 28px;
 }
-.eflux-logo img {
+.eflux-logo svg {
+/*
+  width: 218.3px;
+  height: 65px;
+*/
+  width: 94px;
   height: 28px;
 }
 .eflux-nav {
@@ -18,7 +23,23 @@
   top: 23px;
   right: 32px;
 }
-.eflux-nav img {
+.eflux-nav svg {
+  width: 26px;
   height: 20px;
   margin-left: 34px;
 }
+
+.eflux-header svg path {
+  fill: #000;
+  transition: fill 0.5s;
+}
+.eflux-header svg line {
+  stroke: #000;
+  transition: stroke 0.5s;
+}
+.eflux-header.black svg path {
+  fill: #fff;
+}
+.eflux-header.black svg line {
+  stroke: #fff;
+}
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.icons.js b/animism-align/frontend/app/views/viewer/nav/eflux.icons.js
new file mode 100644
index 0000000..96e2b30
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.icons.js
@@ -0,0 +1,43 @@
+import React from 'react'
+
+export const EfluxLogo = (
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 218.3 65">
+    <g>
+      <g>
+        <path d="M16.7,51.2c1.7,1.7,4.3,2.5,7.5,2.5c2.4,0,4.4-0.6,6.1-1.8c1.7-1.2,2.7-2.4,3.1-3.8h10.3c-1.6,5.1-4.2,8.8-7.5,10.9
+          c-3.4,2.2-7.5,3.3-12.3,3.3c-3.3,0-6.3-0.5-9-1.6s-5-2.6-6.8-4.5c-1.9-2-3.3-4.3-4.3-7s-1.5-5.7-1.5-9c0-3.2,0.5-6.1,1.6-8.8
+          c1-2.7,2.5-5.1,4.4-7.1s4.2-3.6,6.9-4.7c2.7-1.1,5.6-1.7,8.8-1.7c3.6,0,6.8,0.7,9.4,2.1c2.7,1.4,4.9,3.3,6.6,5.6
+          c1.7,2.4,3,5,3.7,8c0.8,3,1,6.2,0.8,9.4H13.9C14,46.8,15,49.5,16.7,51.2z M29.9,29c-1.4-1.5-3.5-2.3-6.4-2.3
+          c-1.9,0-3.4,0.3-4.6,0.9s-2.2,1.4-3,2.3c-0.7,0.9-1.3,1.9-1.6,2.9c-0.3,1-0.5,2-0.5,2.8h18.9C32.3,32.7,31.3,30.5,29.9,29z"/>
+        <path d="M51.8,36.5h20.5v4.7H51.8V36.5z"/>
+        <path d="M77.2,26.8V19h7v-3.3c0-3.8,1.2-6.8,3.5-9.2c2.4-2.4,5.9-3.6,10.7-3.6c1,0,2.1,0,3.1,0.1s2.1,0.1,3,0.2V12
+          c-1.4-0.2-2.8-0.3-4.3-0.3c-1.6,0-2.7,0.4-3.4,1.1c-0.7,0.7-1,1.9-1,3.7V19h8v7.8h-8v34.6H84.2V26.8H77.2z"/>
+        <path d="M120.9,2.9v58.5h-11.7V2.9H120.9z"/>
+        <path d="M158.8,61.5v-5.9h-0.2c-1.5,2.5-3.4,4.2-5.8,5.3c-2.4,1.1-4.8,1.6-7.2,1.6c-3.1,0-5.7-0.4-7.7-1.2s-3.6-2-4.7-3.5
+          c-1.1-1.5-2-3.3-2.4-5.5c-0.5-2.2-0.7-4.6-0.7-7.2V19h11.7v24c0,3.5,0.5,6.1,1.6,7.9c1.1,1.7,3,2.6,5.8,2.6c3.2,0,5.5-0.9,6.9-2.8
+          c1.4-1.9,2.1-5,2.1-9.3V19h11.7v42.5H158.8z"/>
+        <path d="M175.6,19h13.3l7.5,11.1l7.4-11.1h12.9l-13.9,19.9l15.7,22.6H205l-8.9-13.4l-8.9,13.4h-13l15.3-22.3L175.6,19z"/>
+      </g>
+    </g>
+  </svg>
+)
+
+export const EfluxClose = (
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.3 22.3">
+    <g>
+      <line strokeWidth="2" x1="0.7" y1="21.6" x2="21.6" y2="0.7"/>
+      <line strokeWidth="2" x1="0.7" y1="0.7" x2="21.6" y2="21.6"/>
+    </g>
+  </svg>
+)
+
+export const EfluxMenu = (
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 21">
+    <g>
+      <line x1="0" y1="1" x2="30" y2="1"/>
+      <line x1="0" y1="10.5" x2="30" y2="10.5"/>
+      <line x1="0" y1="20" x2="30" y2="20"/>
+    </g>
+  </svg>
+)
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index a6c74d5..74ea3bf 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -6,6 +6,9 @@
   font-size: 18px;
   transition: all 0.2s;
 }
+.viewer-nav.black .main-nav {
+  color: white;
+}
 .main-nav {
   transition: all 0.2s;
   transform: translateZ(0) translateY(0);
@@ -104,6 +107,8 @@
 .viewer-nav .arrow polygon {
   fill: #000;
 }
+.viewer-nav.black .arrow path,
+.viewer-nav.black .arrow polygon,
 .viewer-nav .main-nav:hover .arrow path,
 .viewer-nav .main-nav:hover .arrow polygon,
 .nav-open .viewer-nav .arrow path,
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 5697d88..9cb4e93 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -10,7 +10,7 @@ class NavParent extends Component {
   render() {
     const { viewer } = this.props
     return (
-      <div className="viewer-nav">
+      <div className={"viewer-nav " + viewer.navStyle}>
         <div className='nav-row main-nav'>
           <div className='nav-section-name'>
             <span className="section-link link" onClick={() => actions.viewer.toggleComponent('nav')}>
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
index 55b350d..5683418 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -27,6 +27,16 @@ class PlayerFullscreen extends Component {
     const elements = timeline.filter(element => (
       floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1)
     ))
+    if (elements.length) {
+      const lastElement = elements[elements.length - 1]
+      if (lastElement.color && lastElement.color.textColor === '#ffffff') {
+        actions.viewer.setNavStyle('black')
+      } else {
+        actions.viewer.setNavStyle('white')
+      }
+    } else {
+      actions.viewer.setNavStyle('white')
+    }
     this.setState({ elements })
   }
 
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 679cafc..f03b16d 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -147,6 +147,10 @@ export const setCurrentSection = section => dispatch => {
   dispatch({ type: types.viewer.set_current_section, section })
 }
 
+export const setNavStyle = color => dispatch => {
+  dispatch({ type: types.viewer.set_nav_style, color })
+}
+
 export const showComponent = key => dispatch => {
   dispatch({ type: types.viewer.toggle_component, key, value: true })
 }
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index 66e9e3d..225055c 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -73,7 +73,7 @@ class ViewerContainer extends Component {
     return (
       <div>
         <div className='viewer-parent'>
-          <EfluxChrome />
+          <EfluxChrome navStyle={viewer.navStyle} />
           <div className={className}>
             <Player />
             <NavParent />
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index 73a961f..e2ed779 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -7,6 +7,7 @@ const initialState = {
   sections: { loading: true },
   fullscreenTimeline: [],
   currentSection: null,
+  navStyle: 'white',
   options: {
   }
 }
@@ -33,6 +34,12 @@ export default function viewerReducer(state = initialState, action) {
         currentSection: action.section,
       }
 
+    case types.viewer.set_nav_style:
+      return {
+        ...state,
+        navStyle: action.color,
+      }
+
     default:
       return state
   }