summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--frontend/app/utils/index.js1
-rw-r--r--frontend/app/views/audio/components/audio.select.js53
-rw-r--r--frontend/app/views/graph/components/audio.list.js3
-rw-r--r--frontend/app/views/graph/components/page.form.js40
-rw-r--r--frontend/app/views/page/components/tile.form.js85
5 files changed, 133 insertions, 49 deletions
diff --git a/frontend/app/utils/index.js b/frontend/app/utils/index.js
index ce8d75c..1114d65 100644
--- a/frontend/app/utils/index.js
+++ b/frontend/app/utils/index.js
@@ -8,6 +8,7 @@ export const formatDateTime = dateStr => format(new Date(dateStr), 'd MMM yyyy H
export const formatDate = dateStr => format(new Date(dateStr), 'd MMM yyyy')
export const formatTime = dateStr => format(new Date(dateStr), 'H:mm')
export const formatAge = dateStr => formatDistance(new Date(), new Date(dateStr)) + ' ago.'
+export const unslugify = fn => fn.replace(/-/g, ' ').replace(/_/g, ' ').replace('.mp3', '')
/* Mobile check */
diff --git a/frontend/app/views/audio/components/audio.select.js b/frontend/app/views/audio/components/audio.select.js
new file mode 100644
index 0000000..73142f0
--- /dev/null
+++ b/frontend/app/views/audio/components/audio.select.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import { Select } from 'app/common'
+
+const NO_AUDIO = 0
+const AUDIO_TOP_OPTIONS = [
+ { name: NO_AUDIO, label: 'No Audio' },
+ { name: -2, label: '──────────', disabled: true },
+]
+
+class AudioSelect extends Component {
+ state = {
+ audioList: []
+ }
+
+ constructor(props) {
+ super(props)
+ this.handleSelect = this.handleSelect.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 }))
+ let audioList = [
+ ...AUDIO_TOP_OPTIONS,
+ ...audioUploads,
+ ]
+ this.setState({
+ audioList,
+ })
+ }
+
+ render() {
+ return (
+ <Select
+ title={this.props.title || "Audio"}
+ name={this.props.name}
+ selected={this.props.selected || NO_AUDIO}
+ options={this.state.audioList}
+ onChange={this.props.onChange}
+ />
+ )
+ }
+}
+
+const mapStateToProps = state => ({
+ graph: state.graph,
+})
+
+export default connect(mapStateToProps)(AudioSelect)
diff --git a/frontend/app/views/graph/components/audio.list.js b/frontend/app/views/graph/components/audio.list.js
index b7bf19a..011ab08 100644
--- a/frontend/app/views/graph/components/audio.list.js
+++ b/frontend/app/views/graph/components/audio.list.js
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { history } from 'app/store'
+import { unslugify } from 'app/utils'
import actions from 'app/actions'
class AudioList extends Component {
@@ -132,8 +133,6 @@ class AudioList extends Component {
}
}
-const unslugify = fn => fn.replace(/-/g, ' ').replace(/_/g, ' ').replace('.mp3', '')
-
const mapStateToProps = state => ({
graph: state.graph.show.res,
})
diff --git a/frontend/app/views/graph/components/page.form.js b/frontend/app/views/graph/components/page.form.js
index 2c283aa..91a40a6 100644
--- a/frontend/app/views/graph/components/page.form.js
+++ b/frontend/app/views/graph/components/page.form.js
@@ -4,6 +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'
const newPage = (data) => ({
path: '',
@@ -28,6 +29,16 @@ export default class PageForm extends Component {
errorFields: new Set([]),
}
+ constructor(props){
+ super(props)
+ this.handleChange = this.handleChange.bind(this)
+ this.handleSelect = this.handleSelect.bind(this)
+ this.handleSettingsChange = this.handleSettingsChange.bind(this)
+ this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
+ this.handleSubmit = this.handleSubmit.bind(this)
+ this.handleDelete = this.handleDelete.bind(this)
+ }
+
componentDidMount() {
const { graph, data, isNew } = this.props
const title = isNew ? 'new page' : 'editing ' + data.title
@@ -130,14 +141,14 @@ export default class PageForm extends Component {
return (
<div className='box'>
<h1>{title}</h1>
- <form onSubmit={this.handleSubmit.bind(this)}>
+ <form onSubmit={this.handleSubmit}>
<TextInput
title="Path"
name="path"
required
data={data}
error={errorFields.has('path')}
- onChange={this.handleChange.bind(this)}
+ onChange={this.handleChange}
autoComplete="off"
/>
<LabelDescription>
@@ -149,49 +160,48 @@ export default class PageForm extends Component {
required
data={data}
error={errorFields.has('title')}
- onChange={this.handleChange.bind(this)}
+ onChange={this.handleChange}
autoComplete="off"
/>
<ColorInput
title='BG Color'
name='background_color'
data={data.settings}
- onChange={this.handleSettingsChange.bind(this)}
+ onChange={this.handleSettingsChange}
autoComplete="off"
/>
<TextArea
title="Description"
name="description"
data={data}
- onChange={this.handleChange.bind(this)}
+ onChange={this.handleChange}
/>
- <TextInput
- title="Background Audio URL"
- name="audio"
- required
- data={data.settings}
- onChange={this.handleSettingsChange.bind(this)}
- autoComplete="off"
+ <AudioSelect
+ title="Background Audio"
+ name="background_audio_id"
+ selected={data.settings.background_audio_id}
+ onChange={this.handleSettingsSelect}
/>
+
<Checkbox
label="Restart audio on load"
name="restartAudio"
checked={data.settings.restartAudio}
- onChange={this.handleSettingsSelect.bind(this)}
+ onChange={this.handleSettingsSelect}
autoComplete="off"
/>
<div className='row buttons'>
<SubmitButton
title={submitTitle}
- onClick={this.handleSubmit.bind(this)}
+ onClick={this.handleSubmit}
/>
{!isNew &&
<SubmitButton
title={'Delete'}
className='destroy'
- onClick={this.handleDelete.bind(this)}
+ onClick={this.handleDelete}
/>
}
</div>
diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js
index 3e31758..da72e27 100644
--- a/frontend/app/views/page/components/tile.form.js
+++ b/frontend/app/views/page/components/tile.form.js
@@ -10,6 +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 { preloadImage, preloadVideo } from 'app/utils'
import * as tileActions from '../../tile/tile.actions'
@@ -169,6 +170,19 @@ class TileForm extends Component {
pageList: [],
}
+ constructor(props){
+ super(props)
+ this.handleChange = this.handleChange.bind(this)
+ this.handleSelect = this.handleSelect.bind(this)
+ this.handleSettingsChange = this.handleSettingsChange.bind(this)
+ this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
+ this.handleAlignment = this.handleAlignment.bind(this)
+ this.handleImageChange = this.handleImageChange.bind(this)
+ this.handleVideoChange = this.handleVideoChange.bind(this)
+ this.handleSubmit = this.handleSubmit.bind(this)
+ this.handleDelete = this.handleDelete.bind(this)
+ }
+
componentDidMount() {
const { graph, page, isNew, initialData, sortOrder } = this.props
const title = isNew ? 'new tile' : 'editing tile'
@@ -184,7 +198,6 @@ 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",
@@ -384,21 +397,21 @@ class TileForm extends Component {
return (
<div className='box'>
<h1>{title}</h1>
- <form onSubmit={this.handleSubmit.bind(this)}>
+ <form onSubmit={this.handleSubmit}>
<div className="row selects">
<Select
name='type'
selected={temporaryTile.type}
options={SELECT_TYPES}
title=''
- onChange={this.handleSelect.bind(this)}
+ onChange={this.handleSelect}
/>
<Select
name='align'
selected={temporaryTile.settings.align}
options={ALIGNMENTS}
title=''
- onChange={this.handleAlignment.bind(this)}
+ onChange={this.handleAlignment}
/>
</div>
@@ -417,18 +430,19 @@ class TileForm extends Component {
: ""}
{this.renderHyperlinkForm()}
+ {this.renderAudioForm()}
{this.renderMiscForm()}
<div className='row buttons'>
<SubmitButton
title={submitTitle}
- onClick={this.handleSubmit.bind(this)}
+ onClick={this.handleSubmit}
/>
{!isNew &&
<SubmitButton
title={'Delete'}
className='destroy'
- onClick={this.handleDelete.bind(this)}
+ onClick={this.handleDelete}
/>
}
</div>
@@ -473,7 +487,7 @@ class TileForm extends Component {
required
data={temporaryTile.settings}
error={errorFields.has('url')}
- onChange={this.handleImageChange.bind(this)}
+ onChange={this.handleImageChange}
autoComplete="off"
/>
</div>
@@ -482,7 +496,7 @@ class TileForm extends Component {
label="Tiled"
name="is_tiled"
checked={temporaryTile.settings.is_tiled}
- onChange={this.handleSettingsSelect.bind(this)}
+ onChange={this.handleSettingsSelect}
autoComplete="off"
/>
{temporaryTile.settings.is_tiled &&
@@ -491,7 +505,7 @@ class TileForm extends Component {
selected={temporaryTile.settings.tile_style || 'tile'}
options={IMAGE_TILE_STYLES}
title=''
- onChange={this.handleSettingsSelect.bind(this)}
+ onChange={this.handleSettingsSelect}
/>
}
</div>
@@ -514,7 +528,7 @@ class TileForm extends Component {
required
data={temporaryTile.settings}
error={errorFields.has('url')}
- onChange={this.handleVideoChange.bind(this)}
+ onChange={this.handleVideoChange}
autoComplete="off"
/>
</div>
@@ -524,13 +538,13 @@ class TileForm extends Component {
selected={temporaryTile.settings.video_style || 'none'}
options={VIDEO_STYLES}
title=''
- onChange={this.handleSettingsSelect.bind(this)}
+ onChange={this.handleSettingsSelect}
/>
<Checkbox
label="Loop"
name="loop"
checked={temporaryTile.settings.loop}
- onChange={this.handleSettingsSelect.bind(this)}
+ onChange={this.handleSettingsSelect}
autoComplete="off"
/>
</div>
@@ -539,14 +553,14 @@ class TileForm extends Component {
label="Muted"
name="muted"
checked={temporaryTile.settings.muted}
- onChange={this.handleSettingsSelect.bind(this)}
+ onChange={this.handleSettingsSelect}
autoComplete="off"
/>
<Checkbox
label="Autoadvance"
name="autoadvance"
checked={temporaryTile.settings.autoadvance}
- onChange={this.handleSettingsSelect.bind(this)}
+ onChange={this.handleSettingsSelect}
autoComplete="off"
/>
</div>
@@ -565,7 +579,7 @@ class TileForm extends Component {
required
data={temporaryTile.settings}
error={errorFields.has('content')}
- onChange={this.handleSettingsChange.bind(this)}
+ onChange={this.handleSettingsChange}
autoComplete="off"
/>
<div className='row font'>
@@ -575,7 +589,7 @@ class TileForm extends Component {
selected={temporaryTile.settings.font_family || 'sans-serif'}
options={TEXT_FONT_FAMILIES}
title=''
- onChange={this.handleSettingsSelect.bind(this)}
+ onChange={this.handleSettingsSelect}
/>
<NumberInput
title=''
@@ -584,7 +598,7 @@ class TileForm extends Component {
min={1}
max={1200}
error={errorFields.has('font_size')}
- onChange={this.handleSettingsChange.bind(this)}
+ onChange={this.handleSettingsChange}
autoComplete="off"
/>
<Select
@@ -592,7 +606,7 @@ class TileForm extends Component {
selected={temporaryTile.settings.font_style || 'normal'}
options={TEXT_FONT_STYLES}
title=''
- onChange={this.handleSettingsSelect.bind(this)}
+ onChange={this.handleSettingsSelect}
/>
</div>
<ColorInput
@@ -600,7 +614,7 @@ class TileForm extends Component {
name='font_color'
data={temporaryTile.settings}
error={errorFields.has('font_color')}
- onChange={this.handleSettingsChange.bind(this)}
+ onChange={this.handleSettingsChange}
autoComplete="off"
/>
<ColorInput
@@ -608,7 +622,7 @@ class TileForm extends Component {
name='background_color'
data={temporaryTile.settings}
error={errorFields.has('background_color')}
- onChange={this.handleSettingsChange.bind(this)}
+ onChange={this.handleSettingsChange}
autoComplete="off"
/>
<div className='row pair'>
@@ -619,7 +633,7 @@ class TileForm extends Component {
min={0}
max={1200}
error={errorFields.has('width')}
- onChange={this.handleSettingsChange.bind(this)}
+ onChange={this.handleSettingsChange}
autoComplete="off"
/>
<NumberInput
@@ -629,7 +643,7 @@ class TileForm extends Component {
min={0}
max={1200}
error={errorFields.has('height')}
- onChange={this.handleSettingsChange.bind(this)}
+ onChange={this.handleSettingsChange}
autoComplete="off"
/>
</div>
@@ -650,7 +664,7 @@ class TileForm extends Component {
min={0}
max={1200}
error={errorFields.has('width')}
- onChange={this.handleSettingsChange.bind(this)}
+ onChange={this.handleSettingsChange}
autoComplete="off"
/>
<NumberInput
@@ -660,7 +674,7 @@ class TileForm extends Component {
min={0}
max={1200}
error={errorFields.has('height')}
- onChange={this.handleSettingsChange.bind(this)}
+ onChange={this.handleSettingsChange}
autoComplete="off"
/>
</div>
@@ -670,7 +684,7 @@ class TileForm extends Component {
name="units"
data={temporaryTile.settings}
error={errorFields.has('units')}
- onChange={this.handleSettingsChange.bind(this)}
+ onChange={this.handleSettingsChange}
autoComplete="off"
/>
</div>
@@ -689,7 +703,7 @@ class TileForm extends Component {
required
data={temporaryTile.settings}
error={errorFields.has('content')}
- onChange={this.handleSettingsChange.bind(this)}
+ onChange={this.handleSettingsChange}
autoComplete="off"
/>
<div>
@@ -711,7 +725,7 @@ class TileForm extends Component {
name='target_page_id'
selected={temporaryTile.target_page_id || NO_LINK}
options={pageList}
- onChange={this.handleSelect.bind(this)}
+ onChange={this.handleSelect}
/>
<Select
title=''
@@ -719,7 +733,7 @@ class TileForm extends Component {
selected={temporaryTile.settings.cursor}
options={CURSORS}
defaultOption="Cursor"
- onChange={this.handleSettingsSelect.bind(this)}
+ onChange={this.handleSettingsSelect}
/>
</div>
<div>
@@ -729,7 +743,7 @@ class TileForm extends Component {
placeholder='http://'
name="external_link_url"
data={temporaryTile.settings}
- onChange={this.handleSettingsChange.bind(this)}
+ onChange={this.handleSettingsChange}
autoComplete="off"
/>
}
@@ -738,6 +752,13 @@ class TileForm extends Component {
)
}
+ renderAudioForm() {
+ return (
+ <div>
+ </div>
+ )
+ }
+
renderMiscForm() {
const { temporaryTile } = this.props
return (
@@ -746,7 +767,7 @@ class TileForm extends Component {
title='Opacity'
name='opacity'
value={temporaryTile.settings.opacity}
- onChange={this.handleSettingsSelect.bind(this)}
+ onChange={this.handleSettingsSelect}
min={0.0}
max={1.0}
step={0.01}
@@ -755,7 +776,7 @@ class TileForm extends Component {
title='Scale'
name='scale'
value={temporaryTile.settings.scale}
- onChange={this.handleSettingsSelect.bind(this)}
+ onChange={this.handleSettingsSelect}
min={0.01}
max={10.0}
step={0.01}
@@ -764,7 +785,7 @@ class TileForm extends Component {
title='Rotation'
name='rotation'
value={temporaryTile.settings.rotation}
- onChange={this.handleSettingsSelect.bind(this)}
+ onChange={this.handleSettingsSelect}
min={-180.0}
max={180.0}
step={1}
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 22:27:32 +0000