diff options
Diffstat (limited to 'frontend/app')
| -rw-r--r-- | frontend/app/common/app.css | 14 | ||||
| -rw-r--r-- | frontend/app/utils/index.js | 3 | ||||
| -rw-r--r-- | frontend/app/views/audio/components/audio.select.js | 11 | ||||
| -rw-r--r-- | frontend/app/views/graph/components/page.form.js | 10 | ||||
| -rw-r--r-- | frontend/app/views/graph/graph.actions.js | 11 | ||||
| -rw-r--r-- | frontend/app/views/graph/graph.reducer.js | 14 | ||||
| -rw-r--r-- | frontend/app/views/page/components/page.header.js | 18 | ||||
| -rw-r--r-- | frontend/app/views/page/components/tile.form.js | 41 | ||||
| -rw-r--r-- | frontend/app/views/page/components/tile.handle.js | 1 |
9 files changed, 108 insertions, 15 deletions
diff --git a/frontend/app/common/app.css b/frontend/app/common/app.css index 2e9dc4e..486e5fa 100644 --- a/frontend/app/common/app.css +++ b/frontend/app/common/app.css @@ -116,6 +116,20 @@ header > div > button:hover { border-color: #fff; color: #fff; } + +header .building { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + margin-left: 1rem; + color: #888; +} +header .building .loader { + transform: scale(0.75); + margin-right: 0.5rem; +} + header .vcat-btn { font-size: 0.875rem; padding-left: 0.5rem; diff --git a/frontend/app/utils/index.js b/frontend/app/utils/index.js index 1114d65..6e5a909 100644 --- a/frontend/app/utils/index.js +++ b/frontend/app/utils/index.js @@ -50,7 +50,8 @@ export const pad = (n, m) => { } export const courtesyS = (n, s) => n + ' ' + (n === 1 ? s : s + 's') - +export const capitalize = s => s.split(' ').map(capitalizeWord).join(' ') +export const capitalizeWord = s => s.substr(0, 1).toUpperCase() + s.substr(1) export const padSeconds = n => n < 10 ? '0' + n : n export const timestamp = (n = 0, fps = 25) => { diff --git a/frontend/app/views/audio/components/audio.select.js b/frontend/app/views/audio/components/audio.select.js index 73142f0..cf1dfb2 100644 --- a/frontend/app/views/audio/components/audio.select.js +++ b/frontend/app/views/audio/components/audio.select.js @@ -2,6 +2,7 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import { Select } from 'app/common' +import { unslugify } from 'app/utils' const NO_AUDIO = 0 const AUDIO_TOP_OPTIONS = [ @@ -16,14 +17,14 @@ class AudioSelect extends Component { constructor(props) { super(props) - this.handleSelect = this.handleSelect.bind(this) + this.handleChange = this.handleChange.bind(this) } componentDidMount(){ const { uploads } = this.props.graph.show.res const audioUploads = uploads .filter(upload => upload.tag === 'audio') - .map(page => ({ name: upload.id, label: page.path })) + .map(upload => ({ name: upload.id, label: unslugify(upload.fn) })) let audioList = [ ...AUDIO_TOP_OPTIONS, ...audioUploads, @@ -33,6 +34,10 @@ class AudioSelect extends Component { }) } + handleChange(name, value) { + this.props.onChange(name, parseInt(value)) + } + render() { return ( <Select @@ -40,7 +45,7 @@ class AudioSelect extends Component { name={this.props.name} selected={this.props.selected || NO_AUDIO} options={this.state.audioList} - onChange={this.props.onChange} + onChange={this.handleChange} /> ) } diff --git a/frontend/app/views/graph/components/page.form.js b/frontend/app/views/graph/components/page.form.js index 91a40a6..8148864 100644 --- a/frontend/app/views/graph/components/page.form.js +++ b/frontend/app/views/graph/components/page.form.js @@ -4,7 +4,7 @@ import { Link } from 'react-router-dom' import { session } from 'app/session' import { TextInput, ColorInput, Checkbox, LabelDescription, TextArea, SubmitButton, Loader } from 'app/common' -import { AudioSelect } from 'app/views/audio/components/audio.select' +import AudioSelect from 'app/views/audio/components/audio.select' const newPage = (data) => ({ path: '', @@ -15,8 +15,8 @@ const newPage = (data) => ({ x: 0.05, y: 0.05, background_color: '#000000', - audio: "", - restartAudio: false, + background_audio_id: 0, + restart_audio: false, }, ...data, }) @@ -186,8 +186,8 @@ export default class PageForm extends Component { <Checkbox label="Restart audio on load" - name="restartAudio" - checked={data.settings.restartAudio} + name="restart_audio" + checked={data.settings.restart_audio} onChange={this.handleSettingsSelect} autoComplete="off" /> diff --git a/frontend/app/views/graph/graph.actions.js b/frontend/app/views/graph/graph.actions.js index eba3f92..4185386 100644 --- a/frontend/app/views/graph/graph.actions.js +++ b/frontend/app/views/graph/graph.actions.js @@ -1,4 +1,5 @@ import * as types from 'app/types' +import { api } from 'app/utils' import actions from 'app/actions' export const showAddPageForm = () => dispatch => { @@ -38,4 +39,12 @@ export const setHomePageId = (graph, page) => dispatch => { delete updated_graph.pages updated_graph.home_page_id = page.id actions.graph.update(updated_graph) -}
\ No newline at end of file +} + +export const viewPage = (graph, page) => dispatch => { + api(dispatch, types.api, 'export', `/api/v1/graph/export/${graph.path}`) + .then(result => { + console.log(result) + window.open(`${process.env.EXPORT_HOST}/${graph.path}/${page.path}`) + }) +} diff --git a/frontend/app/views/graph/graph.reducer.js b/frontend/app/views/graph/graph.reducer.js index 30049b5..725c256 100644 --- a/frontend/app/views/graph/graph.reducer.js +++ b/frontend/app/views/graph/graph.reducer.js @@ -8,6 +8,7 @@ const initialState = crudState('graph', { addingPage: false, editingPage: false, showingAudio: false, + building: false, }, options: { } @@ -125,6 +126,19 @@ export default function graphReducer(state = initialState, action) { } } + case types.api.loading: + if (action.tag !== 'view' && action.tag !== 'export') { + return state + } + return { ...state, editor: { ...state.editor, building: action.tag } } + + case types.api.loaded: + case types.api.error: + if (action.tag !== 'view' && action.tag !== 'export') { + return state + } + return { ...state, editor: { ...state.editor, building: null } } + default: return state } diff --git a/frontend/app/views/page/components/page.header.js b/frontend/app/views/page/components/page.header.js index 998572a..dbdf1b6 100644 --- a/frontend/app/views/page/components/page.header.js +++ b/frontend/app/views/page/components/page.header.js @@ -3,6 +3,9 @@ import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import { Link } from 'react-router-dom' +import { Loader } from 'app/common' +import { capitalize } from 'app/utils' + import * as graphActions from '../../graph/graph.actions' import * as pageActions from '../page.actions' @@ -10,13 +13,22 @@ function PageHeader(props) { return ( <header> <div> - <Link to={props.graph.show.res ? "/" + props.graph.show.res.path : "/"} className="logo arrow">{"◁"}</Link> + <Link to={props.graph ? "/" + props.graph.path : "/"} className="logo arrow">{"◁"}</Link> <b>{props.site.siteTitle}</b> + {props.building && ( + <div className='building'> + <div className='loader'> + <Loader /> + </div> + {capitalize(props.building)}ing... + </div> + )} </div> <div> <button onClick={() => props.pageActions.toggleAddTileForm()}>+ Add tile</button> <button onClick={() => props.pageActions.toggleTileList()}>Sort tiles</button> <button onClick={() => props.graphActions.toggleEditPageForm()}>Edit page</button> + <button onClick={() => props.graphActions.viewPage(props.graph, props.page)}>View page</button> </div> </header> ) @@ -25,7 +37,9 @@ function PageHeader(props) { const mapStateToProps = (state) => ({ // auth: state.auth, site: state.site, - graph: state.graph, + graph: state.graph.show.res, + page: state.page.show.res, + building: state.graph.editor.building, // isAuthenticated: state.auth.isAuthenticated, }) diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js index da72e27..d6272bc 100644 --- a/frontend/app/views/page/components/tile.form.js +++ b/frontend/app/views/page/components/tile.form.js @@ -10,7 +10,7 @@ import { TextInput, NumberInput, ColorInput, Slider, Select, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from 'app/common' -import { AudioSelect } from 'app/views/audio/components/audio.select' +import AudioSelect from 'app/views/audio/components/audio.select' import { preloadImage, preloadVideo } from 'app/utils' import * as tileActions from '../../tile/tile.actions' @@ -150,6 +150,10 @@ const newPosition = (data) => ({ opacity: 1, units: false, align: "center_center", + has_audio: false, + audio_on_click_id: 0, + audio_on_hover_id: 0, + wait_for_audio_on_click: false, ...data, }) @@ -198,6 +202,7 @@ class TileForm extends Component { ...PAGE_LIST_TOP_OPTIONS, ...linkPages.map(page => ({ name: page.id, label: page.path })) ] + this.setState({ pageList }) if (isNew) { const newTile = newImage({ id: "new", @@ -430,8 +435,8 @@ class TileForm extends Component { : ""} {this.renderHyperlinkForm()} - {this.renderAudioForm()} {this.renderMiscForm()} + {this.renderAudioForm()} <div className='row buttons'> <SubmitButton @@ -753,8 +758,40 @@ class TileForm extends Component { } renderAudioForm() { + const { temporaryTile } = this.props return ( <div> + <Checkbox + label="Play audio" + name="has_audio" + checked={temporaryTile.settings.has_audio} + onChange={this.handleSettingsSelect} + /> + {temporaryTile.settings.has_audio && ( + <div > + <AudioSelect + title="On click" + name="audio_on_click_id" + selected={temporaryTile.settings.audio_on_click_id} + onChange={this.handleSettingsSelect} + /> + + <Checkbox + label="Navigate when audio finishes" + name="wait_for_audio_on_click" + checked={temporaryTile.settings.wait_for_audio_on_click} + onChange={this.handleSettingsSelect} + autoComplete="off" + /> + + <AudioSelect + title="On hover" + name="audio_on_hover_id" + selected={temporaryTile.settings.audio_on_hover_id} + onChange={this.handleSettingsSelect} + /> + </div> + )} </div> ) } diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js index f47c3cd..090069d 100644 --- a/frontend/app/views/page/components/tile.handle.js +++ b/frontend/app/views/page/components/tile.handle.js @@ -165,7 +165,6 @@ const generateTransform = (tile, box) => { } const generateVideoStyle = (tile, bounds) => { - // console.log(bounds) const style = { pointerEvents: "none", } |