diff options
10 files changed, 114 insertions, 12 deletions
diff --git a/animism-align/frontend/app/router.js b/animism-align/frontend/app/router.js index 73610a6..ff84925 100644 --- a/animism-align/frontend/app/router.js +++ b/animism-align/frontend/app/router.js @@ -33,10 +33,11 @@ export default class Router extends Component { <Header /> <Route path='/project/' component={ProjectContainer} /> <Route path='/episode/' component={EpisodeContainer} /> - <Route path='/editor/' component={EditorContainer} /> + <Route path='/editor/:episode_id/' component={EditorContainer} /> <Route path='/venue/' component={VenueContainer} /> <Route path='/upload/' component={UploadContainer} /> <Route path='/users/' component={UserContainer} /> + <Route path='/editor/' component={DashboardContainer} exact /> <Route path='/' component={DashboardContainer} exact /> </div> </ConnectedRouter> diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js index 5f625d1..4f9d123 100644 --- a/animism-align/frontend/app/types.js +++ b/animism-align/frontend/app/types.js @@ -27,6 +27,9 @@ export const audio = with_type('audio', [ 'play', 'pause', 'seek', 'update_time', 'set_volume', 'set_cc', ]) +export const editor = with_type('editor', [ + 'loaded', +]) export const viewer = with_type('viewer', [ 'load_sections', 'toggle_component', 'toggle_nav_component', 'set_current_section', 'reached_end_of_section', diff --git a/animism-align/frontend/app/views/dashboard/dashboard.container.js b/animism-align/frontend/app/views/dashboard/dashboard.container.js index 6befaae..fa06329 100644 --- a/animism-align/frontend/app/views/dashboard/dashboard.container.js +++ b/animism-align/frontend/app/views/dashboard/dashboard.container.js @@ -83,7 +83,7 @@ class DashboardContainer extends Component { <div className='episode-entry' key={episode.id}> <div className='row'> <div className='title'> - <Link to={`/editor/${episode.id}/viewer/`}> + <Link to={`/editor/${episode.id}/`}> {'Episode #' + episode.episode_number} </Link> {episode.is_live && <span className='published'>{"(published)"}</span>} diff --git a/animism-align/frontend/app/views/editor/align/align.reducer.js b/animism-align/frontend/app/views/editor/align/align.reducer.js index d37cd6d..c9b85d7 100644 --- a/animism-align/frontend/app/views/editor/align/align.reducer.js +++ b/animism-align/frontend/app/views/editor/align/align.reducer.js @@ -13,6 +13,7 @@ const initialState = { }, peaks: { loading: true }, text: { loading: true }, + currentEpisodeId: -1, annotation: {}, selectedAnnotation: {}, options: { @@ -22,6 +23,13 @@ const initialState = { export default function alignReducer(state = initialState, action) { // console.log(action.type, action) switch (action.type) { + + case types.editor.loaded: + return { + ...state, + currentEpisodeId: action.episode_id, + } + case types.peaks.loaded: // console.log('peaks duration:', action.data.length / 10) return { diff --git a/animism-align/frontend/app/views/editor/editor.container.js b/animism-align/frontend/app/views/editor/editor.container.js index 563f50d..599225a 100644 --- a/animism-align/frontend/app/views/editor/editor.container.js +++ b/animism-align/frontend/app/views/editor/editor.container.js @@ -5,17 +5,19 @@ import EditorGate from 'app/views/editor/editor.gate' import AlignContainer from 'app/views/editor/align/align.container' import ParagraphContainer from 'app/views/editor/paragraph/paragraph.container' import MediaContainer from 'app/views/editor/media/media.container' +import OverviewContainer from 'app/views/editor/overview/overview.container' import ViewerContainer from 'app/views/viewer/viewer.container' export default class Router extends Component { render() { + console.log(this.props.match.params) return ( <EditorGate episode_id={this.props.match.params.episode_id}> <Route path={"/editor/:episode_id/timeline/"} component={AlignContainer} /> <Route path={"/editor/:episode_id/transcript/"} component={ParagraphContainer} /> <Route path={"/editor/:episode_id/media/"} component={MediaContainer} /> <Route path={"/editor/:episode_id/viewer/"} component={ViewerContainer} /> - <Route path={"/editor/:episode_id/"} exact component={MediaContainer} /> + <Route path={"/editor/:episode_id/"} exact component={OverviewContainer} /> </EditorGate> ) } diff --git a/animism-align/frontend/app/views/editor/editor.gate.js b/animism-align/frontend/app/views/editor/editor.gate.js index 968680f..b835a69 100644 --- a/animism-align/frontend/app/views/editor/editor.gate.js +++ b/animism-align/frontend/app/views/editor/editor.gate.js @@ -1,32 +1,49 @@ import React, { Component } from 'react' +import { connect } from 'react-redux' import { Loader } from 'app/common' import actions from 'app/actions' -export default class EditorGate extends Component { +class EditorGate extends Component { constructor(props) { super(props) this.load() } + componentDidMount() { + this.load() + } + componentDidUpdate(prevProps) { - if (this.props.episode_id !== prevProps.episode_id) { + if ( + this.props.episode_id !== prevProps.episode_id || + this.props.episode.lookup !== prevProps.episode.lookup + ) { this.load() } } load() { - this.props.episode_id && actions.site.loadEpisode() + if (!this.props.episode.lookup) return + if (!this.props.episode_id) return + const episode = this.props.episode.lookup[this.props.episode_id] + actions.site.loadEpisode(episode) } render() { - if (this.props.logged_in) { + if (parseInt(this.props.episode_id) === parseInt(this.props.currentEpisodeId)) { return this.props.children } return ( - <Loader /> + <div className="dashboard"><Loader /></div> ) } } +const mapStateToProps = state => ({ + episode: state.episode.index, + currentEpisodeId: state.align.currentEpisodeId, +}) + +export default connect(mapStateToProps)(EditorGate)
\ No newline at end of file diff --git a/animism-align/frontend/app/views/editor/overview/overview.container.js b/animism-align/frontend/app/views/editor/overview/overview.container.js new file mode 100644 index 0000000..8ce64b9 --- /dev/null +++ b/animism-align/frontend/app/views/editor/overview/overview.container.js @@ -0,0 +1,64 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' +import { Link } from 'react-router-dom' + +import './overview.css' + +// import actions from 'app/actions' +import { Loader } from 'app/common' +import { groupResponseBy } from 'app/utils/api.utils' + +class OverviewContainer extends Component { + state = { + ready: true, + } + + constructor(props) { + super(props) + } + + componentDidMount() { + this.build() + } + + componentDidUpdate(prevProps) { + if (!this.state.ready) { + this.build() + } + } + + build() { + if (this.props.loading) return + // const episodes = groupResponseBy(this.props.episodes, 'project_id') + // const venues = groupResponseBy(this.props.venues, 'project_id') + // this.setState({ ready: true, episodes, venues }) + } + + render() { + const { loading, projects } = this.props + const { episodes, venues, ready } = this.state + if (loading || !ready) { + return ( + <div className='dashboard'> + <Loader /> + </div> + ) + } + return ( + <div className='dashboard overview'> + <div className='project-top'> + <div className='row project-heading'> + <div className='title'> + <h1>Episode</h1> + </div> + </div> + </div> + </div> + ) + } +} + +const mapStateToProps = state => ({ +}) + +export default connect(mapStateToProps)(OverviewContainer) diff --git a/animism-align/frontend/app/views/editor/overview/overview.css b/animism-align/frontend/app/views/editor/overview/overview.css new file mode 100644 index 0000000..abd6c93 --- /dev/null +++ b/animism-align/frontend/app/views/editor/overview/overview.css @@ -0,0 +1,3 @@ +.overview { + +}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/nav/header.component.js b/animism-align/frontend/app/views/nav/header.component.js index c90e592..8443278 100644 --- a/animism-align/frontend/app/views/nav/header.component.js +++ b/animism-align/frontend/app/views/nav/header.component.js @@ -22,6 +22,7 @@ function Header(props) { <Link to="/">Home</Link> </div> <div> + <Link to={`/editor/${episode_id}/`}>Overview</Link> <Link to={`/editor/${episode_id}/timeline/`}>Timeline</Link> <Link to={`/editor/${episode_id}/transcript/`}>Transcript</Link> <Link to={`/editor/${episode_id}/media/`}>Media</Link> diff --git a/animism-align/frontend/app/views/site/site.actions.js b/animism-align/frontend/app/views/site/site.actions.js index f5ce861..493e566 100644 --- a/animism-align/frontend/app/views/site/site.actions.js +++ b/animism-align/frontend/app/views/site/site.actions.js @@ -11,22 +11,25 @@ export const loadSite = () => dispatch => { actions.episode.index(), actions.venue.index(), ]).then(() => { - console.log('Site ready') + // console.log('Site ready') }).catch(err => { console.error(err) }) } export const loadEpisode = (episode) => dispatch => { + const { id: episode_id } = episode Promise.all([ // actions.site.loadText(episode), actions.site.loadPeaks(episode), actions.audio.load(episode), - actions.annotation.index({ episode_id: episode.id }), - actions.paragraph.index({ episode_id: episode.id }), - actions.media.index({ episode_id: episode.id }), + actions.annotation.index({ episode_id }), + actions.paragraph.index({ episode_id }), + actions.media.index({ episode_id }), ]).then(() => { actions.viewer.loadSections() + dispatch({ type: types.editor.loaded, episode_id }) + console.log('Episode loaded') }).catch(err => { console.error(err) }) |