From 1e39e0d283ad06a4a8212abbe2c817eb6e3f5b91 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 12 Oct 2020 14:44:33 +0200
Subject: toggle script

---
 animism-align/frontend/app/constants.js            |  6 +++++
 animism-align/frontend/app/views/align/align.css   | 16 ++++++++++++-
 .../app/views/align/containers/script.container.js | 27 ++++++++++++++++++----
 .../frontend/app/views/audio/audio.actions.js      |  5 +++-
 .../frontend/app/views/site/site.actions.js        |  5 ++--
 .../frontend/app/views/viewer/nav/eflux.chrome.js  |  4 ++--
 .../frontend/app/views/viewer/nav/eflux.icons.js   |  7 ++++++
 7 files changed, 59 insertions(+), 11 deletions(-)

(limited to 'animism-align/frontend')

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index dfee865..a9f51ec 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -1,3 +1,9 @@
+export const URLS = {
+  audio: '/static/data_store/peaks/animism_episode_01_0910.mp3',
+  peaks: '/static/data_store/peaks/peaks.json',
+  text: '/static/data_store/peaks/text.txt',
+}
+
 export const WAVEFORM_SIZE = 300
 
 export const ZOOM_STEPS = [
diff --git a/animism-align/frontend/app/views/align/align.css b/animism-align/frontend/app/views/align/align.css
index 760ec4b..15ff840 100644
--- a/animism-align/frontend/app/views/align/align.css
+++ b/animism-align/frontend/app/views/align/align.css
@@ -99,9 +99,23 @@ canvas {
 /* Script */
 
 .script {
-  height: calc(100vh - 3.15rem);
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 4rem;
   z-index: 8;
 }
+.script textarea {
+  height: calc(100vh - 3.15rem);
+}
+.script button {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  z-index: 9;
+  border: 0;
+  background: transparent;
+}
 
 /* Annotations */
 
diff --git a/animism-align/frontend/app/views/align/containers/script.container.js b/animism-align/frontend/app/views/align/containers/script.container.js
index cc340c6..fe3f27b 100644
--- a/animism-align/frontend/app/views/align/containers/script.container.js
+++ b/animism-align/frontend/app/views/align/containers/script.container.js
@@ -6,17 +6,34 @@ import { connect } from 'react-redux'
 import actions from 'app/actions'
 
 class Timeline extends Component {
+  state = {
+    visible: false,
+  }
   constructor(props){
     super(props)
   }
   render() {
     if (this.props.text.loading) return <div />
+    if (!this.state.visible) {
+      return (
+        <div className='script'>
+          <button onClick={() => this.setState({ visible: true })}>
+            +
+          </button>
+        </div>
+      )
+    }
     return (
-      <textarea 
-        className='script'
-        onChange={e => actions.site.updateText(e.target.value)}
-        value={this.props.text}
-      />
+      <div className='script'>
+        <textarea 
+          className='script'
+          onChange={e => actions.site.updateText(e.target.value)}
+          value={this.props.text}
+        />
+        <button onClick={() => this.setState({ visible: false })}>
+          x
+        </button>
+      </div>
     )
   }
 }
diff --git a/animism-align/frontend/app/views/audio/audio.actions.js b/animism-align/frontend/app/views/audio/audio.actions.js
index 1a9e823..be9e7dc 100644
--- a/animism-align/frontend/app/views/audio/audio.actions.js
+++ b/animism-align/frontend/app/views/audio/audio.actions.js
@@ -1,11 +1,14 @@
 import * as types from 'app/types'
 import { store, history, dispatch } from 'app/store'
+
+import { URLS } from 'app/constants'
+
 // import actions from 'app/actions'
 // import { session } from 'app/session'
 
 const audioPlayer = document.createElement('audio')
 // audioPlayer.volume = 0.0
-audioPlayer.src = '/static/data_store/peaks/animismA080720.mp3'
+audioPlayer.src = URLS.audio
 audioPlayer.addEventListener('loadedmetadata', () => {
   // console.log('audio duration:', audioPlayer.duration)
   dispatch({ type: types.align.set_display_setting, key: 'duration', value: audioPlayer.duration })
diff --git a/animism-align/frontend/app/views/site/site.actions.js b/animism-align/frontend/app/views/site/site.actions.js
index d1c1e66..6e8b72b 100644
--- a/animism-align/frontend/app/views/site/site.actions.js
+++ b/animism-align/frontend/app/views/site/site.actions.js
@@ -1,6 +1,7 @@
 import * as types from 'app/types'
 import { api } from 'app/utils'
 import actions from 'app/actions'
+import { URLS } from 'app/constants'
 
 export const loadProject = () => dispatch => {
   Promise.all([
@@ -19,11 +20,11 @@ export const loadProject = () => dispatch => {
 }
 
 export const loadPeaks = (asdf) => dispatch => (
-  api(dispatch, types.peaks, 'peaks', '/static/data_store/peaks/peaks.json')
+  api(dispatch, types.peaks, 'peaks', URLS.peaks)
 )
 
 export const loadText = (asdf) => dispatch => (
-  api(dispatch, types.text, 'text', '/static/data_store/peaks/text.txt')
+  api(dispatch, types.text, 'text', URLS.text)
 )
 
 export const updateText = text => dispatch => (
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 a7f6d24..283f3cb 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import {
-  EfluxLogo, EfluxClose, EfluxMenu
+  EfluxLogo, EfluxClose, TranscriptIcon
 } from './eflux.icons'
 import { PlayButton } from './viewer.icons'
 import actions from 'app/actions'
@@ -75,7 +75,7 @@ class EfluxChrome extends Component {
             onMouseLeave={() => this.handleMouseLeave('transcript')}
             onClick={() => actions.viewer.toggleComponent('transcript')}
           >
-            {EfluxMenu}
+            {TranscriptIcon}
           </div>
         </div>
         <div className={this.state.eflux ? "growl-tooltip tooltip-eflux hover" : "growl-tooltip tooltip-eflux"}>
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.icons.js b/animism-align/frontend/app/views/viewer/nav/eflux.icons.js
index 96e2b30..d983d4e 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.icons.js
@@ -41,3 +41,10 @@ export const EfluxMenu = (
     </g>
   </svg>
 )
+
+export const TranscriptIcon = (
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+    <path d="M6.2,4.4v21.3h17.6V4.4H6.2z M22.5,24.4H7.5V5.6h15.1V24.4z M20.4,9.7H9.8V8.5h10.6V9.7z M20.4,13.6H9.8v-1.2h10.6V13.6z
+      M20.4,21.3H9.8V20h10.6V21.3z M20.4,17.4H9.8v-1.2h10.6V17.4z"/>
+  </svg>
+)
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2