From 8792e9fe1c7ab76c35f9a18d866880ba3da2c13e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 15 Mar 2021 19:09:37 +0100 Subject: move frontend site folder. add video support --- frontend/app/site/actions.js | 19 ---- frontend/app/site/app.js | 35 -------- frontend/app/site/index.js | 17 ---- frontend/app/site/site/site.actions.js | 11 --- frontend/app/site/site/site.reducer.js | 36 -------- frontend/app/site/store.js | 37 -------- frontend/app/site/types.js | 11 --- frontend/app/site/viewer/viewer.container.js | 96 -------------------- frontend/app/utils/index.js | 29 ++++++ frontend/app/views/page/components/page.editor.js | 1 + frontend/app/views/page/components/tile.form.js | 103 +++++++++++++++++++++- frontend/app/views/page/components/tile.handle.js | 52 +++++++++++ frontend/app/views/page/cursors.css | 3 + frontend/app/views/page/page.css | 3 + 14 files changed, 189 insertions(+), 264 deletions(-) delete mode 100644 frontend/app/site/actions.js delete mode 100644 frontend/app/site/app.js delete mode 100644 frontend/app/site/index.js delete mode 100644 frontend/app/site/site/site.actions.js delete mode 100644 frontend/app/site/site/site.reducer.js delete mode 100644 frontend/app/site/store.js delete mode 100644 frontend/app/site/types.js delete mode 100644 frontend/app/site/viewer/viewer.container.js (limited to 'frontend/app') diff --git a/frontend/app/site/actions.js b/frontend/app/site/actions.js deleted file mode 100644 index e672028..0000000 --- a/frontend/app/site/actions.js +++ /dev/null @@ -1,19 +0,0 @@ -import { bindActionCreators } from 'redux' -// import { actions as crudActions } from './api' - -import * as siteActions from './site/site.actions' - -import { store } from './store' - -export default - // Object.keys(crudActions) - // .map(a => [a, crudActions[a]]) - // .concat( - [ - ['site', siteActions], - ] //) - .map(p => [p[0], bindActionCreators(p[1], store.dispatch)]) - .concat([ - // ['socket', socketActions], - ]) - .reduce((a,b) => (a[b[0]] = b[1])&&a,{}) \ No newline at end of file diff --git a/frontend/app/site/app.js b/frontend/app/site/app.js deleted file mode 100644 index 389e5b5..0000000 --- a/frontend/app/site/app.js +++ /dev/null @@ -1,35 +0,0 @@ -import React, { Component } from 'react' -import { ConnectedRouter } from 'connected-react-router' -import { Route } from 'react-router' - -import ViewerContainer from './viewer/viewer.container' -import actions from './actions' - -export default class App extends Component { - componentDidMount() { - const path_partz = window.location.pathname.split('/') - const graph_name = path_partz[1] - let path_name = null - if (path_partz.length > 2) { - path_name = path_partz[2] - } - // console.log('loading', graph_name, path_name) - actions.site.loadSite(graph_name, path_name) - } - - render() { - return ( - -
- - { - // setTimeout(() => this.props.history.push('/'), 10) - return null - }} /> -
- - ) - } -} -/* -*/ diff --git a/frontend/app/site/index.js b/frontend/app/site/index.js deleted file mode 100644 index 6f1a0a5..0000000 --- a/frontend/app/site/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import { Provider } from 'react-redux' - -import App from './app' - -import { store, history } from './store' - -const container = document.createElement('div') -container.classList.add('container') -document.body.appendChild(container) - -ReactDOM.render( - - - , container -) diff --git a/frontend/app/site/site/site.actions.js b/frontend/app/site/site/site.actions.js deleted file mode 100644 index 79e4573..0000000 --- a/frontend/app/site/site/site.actions.js +++ /dev/null @@ -1,11 +0,0 @@ -import * as types from '../types' -import { api } from 'app/utils' - -export const setSiteTitle = title => dispatch => { - document.querySelector('title').innerText = title - dispatch({ type: types.site.set_site_title, payload: title }) -} - -export const loadSite = (graph_name, path_name) => dispatch => ( - api(dispatch, types.site, 'site', '/' + graph_name + '/index.json') -) diff --git a/frontend/app/site/site/site.reducer.js b/frontend/app/site/site/site.reducer.js deleted file mode 100644 index 85c3486..0000000 --- a/frontend/app/site/site/site.reducer.js +++ /dev/null @@ -1,36 +0,0 @@ -import * as types from '../types' - -const initialState = { - siteTitle: 'swimmer', - graph: { - loading: true, - } -} - -export default function siteReducer(state = initialState, action) { - console.log(action.type, action) - switch (action.type) { - case types.site.set_site_title: - return { - ...state, - siteTitle: action.payload, - } - - case types.site.loaded: - return { - ...state, - graph: action.data.graph, - } - - case '@@router/LOCATION_CHANGE': - return { - ...state, - graph: { - ...state.graph, - } - } - - default: - return state - } -} diff --git a/frontend/app/site/store.js b/frontend/app/site/store.js deleted file mode 100644 index a228e2b..0000000 --- a/frontend/app/site/store.js +++ /dev/null @@ -1,37 +0,0 @@ -import { applyMiddleware, compose, combineReducers, createStore } from 'redux' -import { connectRouter, routerMiddleware } from 'connected-react-router' -import { createBrowserHistory } from 'history' -import thunk from 'redux-thunk' - -import siteReducer from './site/site.reducer' - -const createRootReducer = history => ( - combineReducers({ - auth: (state = {}) => state, - router: connectRouter(history), - site: siteReducer, - }) -) - -const configureStore = (initialState = {}, history) => { - const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose - - const store = createStore( - createRootReducer(history), - initialState, - composeEnhancers( - applyMiddleware( - thunk, - routerMiddleware(history) - ), - ), - ) - - return store -} - -const history = createBrowserHistory() -const store = configureStore({}, history) -const { dispatch } = store - -export { store, history, dispatch } diff --git a/frontend/app/site/types.js b/frontend/app/site/types.js deleted file mode 100644 index 23bed98..0000000 --- a/frontend/app/site/types.js +++ /dev/null @@ -1,11 +0,0 @@ -import { with_type, crud_type } from 'app/api/crud.types' - -export const site = with_type('site', [ - 'set_site_title', 'loading', 'loaded', 'error', -]) - -export const system = with_type('system', [ - 'load_site', -]) - -export const init = '@@INIT' diff --git a/frontend/app/site/viewer/viewer.container.js b/frontend/app/site/viewer/viewer.container.js deleted file mode 100644 index 42ce6c2..0000000 --- a/frontend/app/site/viewer/viewer.container.js +++ /dev/null @@ -1,96 +0,0 @@ -import React, { Component } from 'react' -import { Route } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import actions from '../actions' -import { Loader } from 'app/common/loader.component' -import TileHandle from 'app/views/page/components/tile.handle' - -import '../../views/page/page.css' - -class ViewerContainer extends Component { - state = { - page: {}, - } - - constructor(props) { - super(props) - this.pageRef = React.createRef() - this.handleMouseDown = this.handleMouseDown.bind(this) - } - - componentDidUpdate(prevProps) { - // console.log('didUpdate', this.props.graph !== prevProps.graph, this.props.location.pathname !== prevProps.location.pathname) - if (this.props.graph !== prevProps.graph || this.props.location.pathname !== prevProps.location.pathname) { - this.load() - } - } - - load() { - const { graph_name, page_name } = this.props.match.params - const page_path = ["", graph_name, page_name].join('/') - const { pages, home_page } = this.props.graph - const page = pages[page_path] - if (!page) { - // console.log('-> home page') - console.log(page_path) - const { home_page } = this.props.graph - this.setState({ page: pages[home_page] }) - } else { - // console.log(page) - console.log(page_path) - this.setState({ page }) - } - } - - handleMouseDown(e, tile) { - // console.log(tile) - } - - render() { - const { page } = this.state - if (this.props.graph.loading || !page.id) { - return ( -
-
-
- -
-
-
- ) - } - const { settings } = page - const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' } - // console.log(page) - return ( -
-
- {page.tiles.map(tile => { - return ( - this.handleMouseDown(e, tile)} - onDoubleClick={e => {}} - /> - ) - })} -
-
- ) - } -} - -const mapStateToProps = state => ({ - site: state.site, - graph: state.site.graph, -}) - -const mapDispatchToProps = dispatch => ({ -}) - -export default connect(mapStateToProps, mapDispatchToProps)(ViewerContainer) diff --git a/frontend/app/utils/index.js b/frontend/app/utils/index.js index bb5e01d..ce8d75c 100644 --- a/frontend/app/utils/index.js +++ b/frontend/app/utils/index.js @@ -120,6 +120,35 @@ export const preloadImage = url => ( }) ) +export const preloadVideo = url => ( + new Promise((resolve, reject) => { + const video = document.createElement('video') + let loaded = false + const bind = () => { + video.addEventListener('loadedmetadata', onload) + video.addEventListener('error', onerror) + } + const unbind = () => { + video.removeEventListener('loadedmetadata', onload) + video.removeEventListener('error', onerror) + } + const onload = () => { + if (loaded) return + loaded = true + unbind() + resolve(video) + } + const onerror = (error) => { + if (loaded) return + loaded = true + unbind() + reject(error) + } + bind() + video.src = url + }) +) + export const cropImage = (url, crop) => { return new Promise((resolve, reject) => { let { x, y, w, h } = crop diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js index d324874..25342d2 100644 --- a/frontend/app/views/page/components/page.editor.js +++ b/frontend/app/views/page/components/page.editor.js @@ -73,6 +73,7 @@ class PageEditor extends Component { } handleMouseDown(e, tile) { + if (e.metaKey || e.ctrlKey || e.altKey || e.button !== 0) return const bounds = this.getBoundingClientRect() const mouseX = e.pageX const mouseY = e.pageY diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js index 3f43dd0..a9f34a7 100644 --- a/frontend/app/views/page/components/tile.form.js +++ b/frontend/app/views/page/components/tile.form.js @@ -10,12 +10,12 @@ import { TextInput, NumberInput, ColorInput, Slider, Select, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from 'app/common' -import { preloadImage } from 'app/utils' +import { preloadImage, preloadVideo } from 'app/utils' import * as tileActions from '../../tile/tile.actions' const SELECT_TYPES = [ - "image", "text", "link", "script", + "image", "text", "video", "link", "script", ].map(s => ({ name: s, label: s })) const ALIGNMENTS = [ @@ -31,6 +31,7 @@ const ALIGNMENTS = [ const REQUIRED_KEYS = { image: ['url'], + video: ['url'], text: ['content'], link: [], script: [], @@ -40,6 +41,10 @@ const IMAGE_TILE_STYLES = [ 'tile', 'cover', 'contain', 'contain no-repeat' ].map(style => ({ name: style, label: style })) +const VIDEO_STYLES = [ + 'normal', 'cover', 'contain', +].map(style => ({ name: style, label: style })) + const TEXT_FONT_FAMILIES = [ 'sans-serif', 'serif', 'fantasy', 'monospace', 'cursive', ].map(style => ({ name: style, label: style })) @@ -49,6 +54,7 @@ const TEXT_FONT_STYLES = [ ].map(style => ({ name: style, label: style })) const CURSORS = [ + { name: 'none', label: 'None', }, { name: 'hand_up', label: 'Up', }, { name: 'hand_down', label: 'Down', }, { name: 'hand_left', label: 'Left', }, @@ -80,6 +86,22 @@ const newImage = (data) => ({ ...data, }) +const newVideo = (data) => ({ + settings: { + ...newPosition(), + video_style: 'cover', + url: "", + external_link_url: "", + cursor: 'none', + muted: false, + loop: false, + autoadvance: false, + }, + type: 'video', + target_page_id: null, + ...data, +}) + const newText = (data) => ({ settings: { ...newPosition(), @@ -123,12 +145,14 @@ const newPosition = (data) => ({ width: 0, height: 0, rotation: 0, scale: 1, opacity: 1, + units: false, align: "center_center", ...data, }) const TYPE_CONSTRUCTORS = { image: newImage, + video: newVideo, text: newText, link: newLink, script: newScript, @@ -277,6 +301,24 @@ class TileForm extends Component { }) } + handleVideoChange(e) { + const { name, value } = e.target + this.handleSettingsSelect(name, value) + preloadVideo(value).then(video => { + // console.log(img) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + settings: { + ...this.props.temporaryTile.settings, + [name]: value, + width: video.videoWidth, + height: video.videoHeight, + x: 0, y: 0, + } + }) + }) + } + clearErrorField(name) { const { errorFields } = this.state if (errorFields.has(name)) { @@ -362,6 +404,8 @@ class TileForm extends Component { {temporaryTile.type === 'image' ? this.renderImageForm() + : temporaryTile.type === 'video' + ? this.renderVideoForm() : temporaryTile.type === 'text' ? this.renderTextForm() : temporaryTile.type === 'link' @@ -453,6 +497,61 @@ class TileForm extends Component { ) } + renderVideoForm() { + // const { isNew } = this.props + const { temporaryTile } = this.props + const { errorFields } = this.state + // console.log(temporaryTile.settings) + return ( +
+
+ +
+
+ +
+ {graph.uploads.map(upload => ( +
this.toggleAudio(upload)} > + +
+
{unslugify(upload.fn)}
+
+
+ ))} +
+ ) + } +} + +const unslugify = fn => fn.replace(/-/g, ' ').replace(/_/g, ' ').replace('.mp3', '') + +const mapStateToProps = state => ({ + graph: state.graph.show.res, +}) + +const mapDispatchToProps = dispatch => ({ +}) + +export default connect(mapStateToProps, mapDispatchToProps)(AudioList) + + +/* + - upload new audio file + */ \ No newline at end of file diff --git a/frontend/app/views/graph/components/graph.header.js b/frontend/app/views/graph/components/graph.header.js index b969400..0766580 100644 --- a/frontend/app/views/graph/components/graph.header.js +++ b/frontend/app/views/graph/components/graph.header.js @@ -14,6 +14,7 @@ function GraphHeader(props) {
+
) diff --git a/frontend/app/views/graph/graph.actions.js b/frontend/app/views/graph/graph.actions.js index a24ccc2..eba3f92 100644 --- a/frontend/app/views/graph/graph.actions.js +++ b/frontend/app/views/graph/graph.actions.js @@ -25,6 +25,10 @@ export const toggleEditPageForm = () => dispatch => { dispatch({ type: types.graph.toggle_edit_page_form }) } +export const toggleAudioList = () => dispatch => { + dispatch({ type: types.graph.toggle_audio_list }) +} + export const updateGraphPage = page => dispatch => { dispatch({ type: types.graph.update_graph_page, page }) } diff --git a/frontend/app/views/graph/graph.container.js b/frontend/app/views/graph/graph.container.js index 9e354fc..34c3d9d 100644 --- a/frontend/app/views/graph/graph.container.js +++ b/frontend/app/views/graph/graph.container.js @@ -15,6 +15,7 @@ import PageEdit from './components/page.edit' import GraphHeader from './components/graph.header' import GraphEditor from './components/graph.editor' +import AudioList from './components/audio.list' class GraphContainer extends Component { componentDidMount() { @@ -63,6 +64,7 @@ class GraphContainer extends Component {
{this.props.graph.editor.addingPage && } {this.props.graph.editor.editingPage && } + {this.props.graph.editor.showingAudio && }
diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css index 2805cb0..c6ef115 100644 --- a/frontend/app/views/graph/graph.css +++ b/frontend/app/views/graph/graph.css @@ -146,6 +146,59 @@ width: 5.5rem; } +/* Upload area */ + +.box .uploadButton { + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} +.uploadButton input[type=file] { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; +} +.audioList .audioItem { + display: flex; + justify-content: flex-start; + align-items: center; + cursor: pointer; + padding: 0.125rem 0; +} +.audioList .playButton { + background: transparent; + border: 0; + width: 1.5rem; + height: 1.5rem; + margin-right: 0.5rem; + opacity: 0.8; +} +.audioList .title { + display: flex; + justify-content: flex-start; + align-items: center; + overflow: hidden; + flex: 1; +} +.audioList .title div { + overflow: hidden; + text-overflow: ellipsis; + white-space: pre; + width: 100%; +} +.audioList .audioItem:hover { + background: rgba(255,255,255,0.2); +} +.audioList .audioItem:hover .title { + color: #fff; +} +.audioList .audioItem:hover .playButton { + opacity: 1.0; +} + /* Graph handles */ .handle { diff --git a/frontend/app/views/graph/graph.reducer.js b/frontend/app/views/graph/graph.reducer.js index 6be5089..30049b5 100644 --- a/frontend/app/views/graph/graph.reducer.js +++ b/frontend/app/views/graph/graph.reducer.js @@ -7,6 +7,7 @@ const initialState = crudState('graph', { editor: { addingPage: false, editingPage: false, + showingAudio: false, }, options: { } @@ -36,6 +37,19 @@ export default function graphReducer(state = initialState, action) { } } + case types.upload.upload_complete: + console.log(action) + return { + ...state, + show: { + ...state.show, + res: { + ...state.show.res, + uploads: state.show.res.uploads.concat(action.data.res) + } + } + } + case types.graph.show_add_page_form: return { ...state, @@ -43,6 +57,7 @@ export default function graphReducer(state = initialState, action) { ...state.editor, addingPage: true, editingPage: false, + showingAudio: false, } } @@ -52,6 +67,7 @@ export default function graphReducer(state = initialState, action) { editor: { ...state.editor, addingPage: false, + showingAudio: false, } } @@ -62,6 +78,7 @@ export default function graphReducer(state = initialState, action) { ...state.editor, addingPage: !state.editor.addingPage, editingPage: false, + showingAudio: false, } } @@ -72,6 +89,7 @@ export default function graphReducer(state = initialState, action) { ...state.editor, addingPage: false, editingPage: true, + showingAudio: false, } } @@ -81,6 +99,7 @@ export default function graphReducer(state = initialState, action) { editor: { ...state.editor, editingPage: false, + showingAudio: false, } } @@ -91,6 +110,18 @@ export default function graphReducer(state = initialState, action) { ...state.editor, addingPage: false, editingPage: !state.editor.editingPage, + showingAudio: false, + } + } + + case types.graph.toggle_audio_list: + return { + ...state, + editor: { + ...state.editor, + addingPage: false, + editingPage: false, + showingAudio: !state.editor.showingAudio, } } diff --git a/static/img/icons_pause_white.svg b/static/img/icons_pause_white.svg new file mode 100755 index 0000000..59c7e60 --- /dev/null +++ b/static/img/icons_pause_white.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/static/img/icons_play_white.svg b/static/img/icons_play_white.svg new file mode 100755 index 0000000..78ff002 --- /dev/null +++ b/static/img/icons_play_white.svg @@ -0,0 +1,6 @@ + + + + + -- cgit v1.2.3-70-g09d2 From 6d435be9facbc5e4badc0f310c4199b113dc1aec Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 16 Mar 2021 18:21:44 +0100 Subject: log --- frontend/app/views/graph/components/audio.list.js | 1 - 1 file changed, 1 deletion(-) (limited to 'frontend/app') diff --git a/frontend/app/views/graph/components/audio.list.js b/frontend/app/views/graph/components/audio.list.js index bd8fe16..b7bf19a 100644 --- a/frontend/app/views/graph/components/audio.list.js +++ b/frontend/app/views/graph/components/audio.list.js @@ -97,7 +97,6 @@ class AudioList extends Component { const { playing, play_id } = this.state const { graph } = this.props // console.log(graph.uploads) - console.log(playing, play_id) return (
-- cgit v1.2.3-70-g09d2 From 92566ba17f5e921d5bff1f3fb4e4b0d92ca4fd39 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 17 Mar 2021 11:54:58 +0100 Subject: audio select --- frontend/app/utils/index.js | 1 + .../app/views/audio/components/audio.select.js | 53 ++++++++++++++ frontend/app/views/graph/components/audio.list.js | 3 +- frontend/app/views/graph/components/page.form.js | 40 ++++++---- frontend/app/views/page/components/tile.form.js | 85 ++++++++++++++-------- 5 files changed, 133 insertions(+), 49 deletions(-) create mode 100644 frontend/app/views/audio/components/audio.select.js (limited to 'frontend/app') 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 ( +