diff options
Diffstat (limited to 'animism-align/frontend/app')
7 files changed, 59 insertions, 11 deletions
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 |