From f8b61281be84a6e4e7a44be5109e688a7c56c671 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 7 Jul 2017 21:18:33 +0200 Subject: refactor files so list updates while processing --- client/components/App.jsx | 14 +--- client/components/Browser/Browser.jsx | 57 --------------- client/components/Browser/BrowserView.jsx | 29 ++++++++ .../components/Browser/Files/FileUploadButton.jsx | 35 +++++++++ client/components/Browser/Files/Files.jsx | 82 ++++++++++++++++++++++ .../components/Browser/Folder/FileUploadButton.jsx | 35 --------- client/components/Browser/Folder/Files.jsx | 79 --------------------- client/components/Tasks/TaskListView.jsx | 23 ++++++ client/components/Tasks/Tasks.jsx | 27 +------ client/components/UI/AudioPlayer.jsx | 36 ---------- client/components/UI/AudioPlayerView.jsx | 36 ++++++++++ client/components/UI/Header.jsx | 5 +- 12 files changed, 210 insertions(+), 248 deletions(-) delete mode 100644 client/components/Browser/Browser.jsx create mode 100644 client/components/Browser/BrowserView.jsx create mode 100644 client/components/Browser/Files/FileUploadButton.jsx create mode 100644 client/components/Browser/Files/Files.jsx delete mode 100644 client/components/Browser/Folder/FileUploadButton.jsx delete mode 100644 client/components/Browser/Folder/Files.jsx create mode 100644 client/components/Tasks/TaskListView.jsx delete mode 100644 client/components/UI/AudioPlayer.jsx create mode 100644 client/components/UI/AudioPlayerView.jsx (limited to 'client/components') diff --git a/client/components/App.jsx b/client/components/App.jsx index b3da081..d8050c8 100644 --- a/client/components/App.jsx +++ b/client/components/App.jsx @@ -3,23 +3,11 @@ import { isMobile } from '../vendor/util' // import db from '../db' import Header from './UI/Header.jsx' -import Browser from './Browser/Browser.jsx' +import Browser from '../containers/browser.js' import Tasks from './Tasks/Tasks.jsx' import client from '../client' -var socket = io(window.location.origin) - -socket.on('connect', (data) => { - console.log('connected') -}) -socket.on('worker', (data) => { - console.log('worker connected', data) -}) -socket.on('processed', (data) => { - console.log('processed', data) -}) - const App = () => { return (
diff --git a/client/components/Browser/Browser.jsx b/client/components/Browser/Browser.jsx deleted file mode 100644 index a7731f1..0000000 --- a/client/components/Browser/Browser.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import { h, Component } from 'preact' - -import Folders from './Folders/Folders.jsx' -import Files from './Folder/Files.jsx' - -import client from '../../client' - -class Browser extends Component { - constructor(props) { - super() - let openFolders = JSON.parse( localStorage['openFolders'] || 'null' ) - this.state = { - folders: [], - openFolders: openFolders || [], - } - client.folder.index().then( folders => this.setState({ folders }) ) - } - openFolder(folder) { - if (this.state.openFolders.indexOf(folder.id) === -1) { - const newOpenFolders = this.state.openFolders.concat(folder.id) - localStorage['openFolders'] = JSON.stringify(newOpenFolders) - this.setState({ openFolders: newOpenFolders }) - } - } - closeFolder(folder) { - const openFolders = this.state.openFolders.filter( folder_id => folder_id !== folder.id ) - localStorage['openFolders'] = JSON.stringify(openFolders) - this.setState({ openFolders }) - } - addFolder(folder) { - this.setState({ folders: this.state.folders.concat([folder]) }) - } - render() { - const openFolders = this.state.openFolders.map((folder_id) => { - const folder_list = this.state.folders.filter(folder => folder.id === folder_id) - if (! folder_list.length) return - const folder = folder_list[0] - return ( - this.closeFolder(folder)} - /> - ) - }) - return ( -
- this.openFolder(folder)} - addFolder={(folder) => this.addFolder(folder)} - /> - {openFolders} -
- ) - } -} - -export default Browser diff --git a/client/components/Browser/BrowserView.jsx b/client/components/Browser/BrowserView.jsx new file mode 100644 index 0000000..ed4f2cb --- /dev/null +++ b/client/components/Browser/BrowserView.jsx @@ -0,0 +1,29 @@ +import { h, Component } from 'preact' + +import Folders from './Folders/Folders.jsx' +import Files from './Files/Files.jsx' + +export default function BrowserView (props) { + console.log('browser view', props) + const openFolders = (props.openFolders || []).map((folder_id) => { + const folder_list = props.folders.filter(folder => folder.id === folder_id) + if (! folder_list.length) return + const folder = folder_list[0] + return ( + props.closeFolder(folder)} + /> + ) + }) + + return ( +
+ props.openFolder(folder)} + addFolder={(folder) => props.addFolder(folder)} + /> + {openFolders} +
+ ) +} diff --git a/client/components/Browser/Files/FileUploadButton.jsx b/client/components/Browser/Files/FileUploadButton.jsx new file mode 100644 index 0000000..136cd45 --- /dev/null +++ b/client/components/Browser/Files/FileUploadButton.jsx @@ -0,0 +1,35 @@ +import { h, Component } from 'preact' + +import client from '../../../client.js' + +export default class Folder extends Component { + constructor(props) { + super() + this.state = { + } + this.updateFiles = this.updateFiles.bind(this) + } + updateFiles(event){ + const name = event.target.name + const files = event.target.files + client.upload(this.props.folder.id, files).then( got_files => { + this.props.addFiles(got_files) + }) + } + + render() { + const files = (this.props.folder.files || []).map( (file, i) => { + return ( +
+ {file.name} +
+ ) + }) + return ( +
+ + + upload +
+ ) + } +} diff --git a/client/components/Browser/Files/Files.jsx b/client/components/Browser/Files/Files.jsx new file mode 100644 index 0000000..74c266f --- /dev/null +++ b/client/components/Browser/Files/Files.jsx @@ -0,0 +1,82 @@ +import { h, Component } from 'preact' + +import { audioPlayFile } from '../../../actions' + +import client from '../../../client.js' + +import FileUploadButton from './FileUploadButton.jsx' +import FileLink from '../../../containers/fileLink.js' +import TaskContentLink from '../../../containers/taskContentLink.js' +import TaskStyleLink from '../../../containers/taskStyleLink.js' + +export default class Files extends Component { + constructor(props) { + super() + this.state = { + selected: null, + } + this.addFiles = this.addFiles.bind(this) + } + addFiles(newFiles) { + if (! newFiles) return + const files = this.state.files.concat(newFiles).sort( (a,b) => { return b.id - a.id } ) + this.setState({ files }) + } + handleClick(file) { + this.setState({ selected: file }) + } + render() { + let file_list; + if (this.props.folder && this.props.folder.files) { + file_list = this.props.folder.files + } + else { + file_list = [] + } + const files = file_list.map(toFilenamePair).sort(sortByFilename).map(fromPair).map( (file, i) => { + if (! file) return + return ( +
+ {file.name} + {file.processed ? file.mime : 'working...'} + {file.duration ? (file.duration.toFixed(1) + 's') : ''} + + content + style + +
+ ) + }) + return ( +
+
+ {this.props.folder.name} +
+ + +
+
+
+ {files} +
+
+ ) + } +} + +function toFilenamePair (file) { return [file.name.toLowerCase(), file] } +function sortByFilename (a,b) { return a[0] < b[0] ? -1 : a[0] == b[0] ? 0 : 1 } +function fromPair (pair) { return pair[1] } + +function filepath (file) { + return '/data/' + file.folder_id + '/' + encodeURIComponent(file.name) +} +function mp3path (file) { + if (file.mime !== 'audio/mp3') { + return filepath(file) + '.mp3' + } + return filepath(file) +} +function pngpath (file) { + return filepath(file) + '.png' +} \ No newline at end of file diff --git a/client/components/Browser/Folder/FileUploadButton.jsx b/client/components/Browser/Folder/FileUploadButton.jsx deleted file mode 100644 index 136cd45..0000000 --- a/client/components/Browser/Folder/FileUploadButton.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import { h, Component } from 'preact' - -import client from '../../../client.js' - -export default class Folder extends Component { - constructor(props) { - super() - this.state = { - } - this.updateFiles = this.updateFiles.bind(this) - } - updateFiles(event){ - const name = event.target.name - const files = event.target.files - client.upload(this.props.folder.id, files).then( got_files => { - this.props.addFiles(got_files) - }) - } - - render() { - const files = (this.props.folder.files || []).map( (file, i) => { - return ( -
- {file.name} -
- ) - }) - return ( -
- - + upload -
- ) - } -} diff --git a/client/components/Browser/Folder/Files.jsx b/client/components/Browser/Folder/Files.jsx deleted file mode 100644 index f0ad95e..0000000 --- a/client/components/Browser/Folder/Files.jsx +++ /dev/null @@ -1,79 +0,0 @@ -import { h, Component } from 'preact' - -import { audioPlayFile } from '../../../actions' - -import client from '../../../client.js' - -import FileUploadButton from './FileUploadButton.jsx' -import FileLink from '../../../containers/fileLink.js' -import TaskContentLink from '../../../containers/taskContentLink.js' -import TaskStyleLink from '../../../containers/taskStyleLink.js' - -export default class Files extends Component { - constructor(props) { - super() - this.state = { - files: props.folder.files || [], - selected: null, - } - this.addFiles = this.addFiles.bind(this) - if (! props.folder.files) { - client.file.index({ folder_id: props.folder.id }).then( files => this.setState({ files }) ) - } - } - addFiles(newFiles) { - if (! newFiles) return - const files = this.state.files.concat(newFiles).sort( (a,b) => { return b.id - a.id } ) - this.setState({ files }) - } - handleClick(file) { - this.setState({ selected: file }) - } - render() { - const files = (this.state.files).map(toFilenamePair).sort(sortByFilename).map(fromPair).map( (file, i) => { - if (! file) return - return ( -
- {file.name} - {file.processed ? file.mime : 'working...'} - {file.duration ? (file.duration.toFixed(1) + 's') : ''} - - content - style - -
- ) - }) - return ( -
-
- {this.props.folder.name} -
- - -
-
-
- {files} -
-
- ) - } -} - -function toFilenamePair (file) { return [file.name.toLowerCase(), file] } -function sortByFilename (a,b) { return a[0] < b[0] ? -1 : a[0] == b[0] ? 0 : 1 } -function fromPair (pair) { return pair[1] } - -function filepath (file) { - return '/data/' + file.folder_id + '/' + encodeURIComponent(file.name) -} -function mp3path (file) { - if (file.mime !== 'audio/mp3') { - return filepath(file) + '.mp3' - } - return filepath(file) -} -function pngpath (file) { - return filepath(file) + '.png' -} \ No newline at end of file diff --git a/client/components/Tasks/TaskListView.jsx b/client/components/Tasks/TaskListView.jsx new file mode 100644 index 0000000..dc1d9b4 --- /dev/null +++ b/client/components/Tasks/TaskListView.jsx @@ -0,0 +1,23 @@ +import { h, Component } from 'preact' + +import FileLink from '../../containers/fileLink.js' + +export default function TaskListView (props) { + const tasks = (props.tasks || []).map( (task, i) => { + return ( +
+ {task.id} + {task.created_at} + {task.content_file.name} + {task.style_file.name} + {task.alpha} +
+ ) + // {task.result_file.name} + }) + return ( +
+ {tasks} +
+ ) +} diff --git a/client/components/Tasks/Tasks.jsx b/client/components/Tasks/Tasks.jsx index 263e669..79ee0a1 100644 --- a/client/components/Tasks/Tasks.jsx +++ b/client/components/Tasks/Tasks.jsx @@ -2,31 +2,10 @@ import { h, Component } from 'preact' import { Link } from 'react-router-dom' import TaskForm from '../../containers/taskForm.js' - -import client from '../../client.js' +import TaskList from '../../containers/taskList.js' export default class Tasks extends Component { - constructor(props) { - super() - this.state = { - adding: false, - tasks: [], - } - client.task.index().then( tasks => this.setState({ tasks }) ) - } render() { -// {task.result_file.name} - const tasks = (this.state.tasks || []).map( (task, i) => { - return ( -
this.toggle(task)}> - {task.id} - {task.created_at} - {task.content_file.name} - {task.style_file.name} - {task.alpha} -
- ) - }) return (
@@ -39,9 +18,7 @@ export default class Tasks extends Component {
recent tasks
-
- {tasks} -
+
) diff --git a/client/components/UI/AudioPlayer.jsx b/client/components/UI/AudioPlayer.jsx deleted file mode 100644 index 1a68518..0000000 --- a/client/components/UI/AudioPlayer.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import { h, Component } from 'preact' - -const audio = document.createElement('audio') - -export default function AudioPlayer (props) { - if (props.file) { - document.body.style.backgroundImage = 'url(' + pngpath(file) + ')' - audio.src = mp3path(props.file) - audio.play() - return ( -
- Playing {props.file.name} -
- ) - } - else { - return ( -
- Not Playing -
- ) - } -} - -function filepath (file) { - return '/data/' + file.folder_id + '/' + encodeURIComponent(file.name) -} -function mp3path (file) { - if (file.mime !== 'audio/mp3') { - return filepath(file) + '.mp3' - } - return filepath(file) -} -function pngpath (file) { - return filepath(file) + '.png' -} diff --git a/client/components/UI/AudioPlayerView.jsx b/client/components/UI/AudioPlayerView.jsx new file mode 100644 index 0000000..62745ed --- /dev/null +++ b/client/components/UI/AudioPlayerView.jsx @@ -0,0 +1,36 @@ +import { h, Component } from 'preact' + +const audio = document.createElement('audio') + +export default function AudioPlayerView (props) { + if (props.file) { + document.body.style.backgroundImage = 'url(' + pngpath(props.file) + ')' + audio.src = mp3path(props.file) + audio.play() + return ( +
+ Playing {props.file.name} +
+ ) + } + else { + return ( +
+ Not Playing +
+ ) + } +} + +function filepath (file) { + return '/data/' + file.folder_id + '/' + encodeURIComponent(file.name) +} +function mp3path (file) { + if (file.mime !== 'audio/mp3') { + return filepath(file) + '.mp3' + } + return filepath(file) +} +function pngpath (file) { + return filepath(file) + '.png' +} diff --git a/client/components/UI/Header.jsx b/client/components/UI/Header.jsx index 55dd25f..3f643ba 100644 --- a/client/components/UI/Header.jsx +++ b/client/components/UI/Header.jsx @@ -1,6 +1,5 @@ import { h, Component } from 'preact' -// import { Link } from 'react-router-dom' -import AudioPlayerContainer from '../../containers/audioPlayerContainer.js' +import AudioPlayer from '../../containers/audioPlayer.js' export default class Header extends Component { constructor(props) { @@ -12,7 +11,7 @@ export default class Header extends Component { return (
spawn cortex - +
) } -- cgit v1.2.3-70-g09d2