From 3c9ccd38751501bbf5b9cd2c54dee370681fdb5b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 20 Sep 2018 02:52:55 +0200 Subject: stub file viewer --- app/client/socket/socket.actions.js | 1 + 1 file changed, 1 insertion(+) (limited to 'app/client/socket/socket.actions.js') diff --git a/app/client/socket/socket.actions.js b/app/client/socket/socket.actions.js index b80a0fa..4bae3b3 100644 --- a/app/client/socket/socket.actions.js +++ b/app/client/socket/socket.actions.js @@ -8,6 +8,7 @@ export const count_directory = opt => syscall_async('count_directory', opt).t export const list_sequences = opt => syscall_async('list_sequences', opt).then(res => res.sequences) export const run_script = opt => syscall_async('run_script', opt) export const upload_file = opt => syscall_async('upload_file', opt) +export const read_file = opt => syscall_async('read_file', opt) export const syscall_async = (tag, payload, ttl=10000) => { ttl = payload.ttl || ttl -- cgit v1.2.3-70-g09d2 From 270d9ccc3f93f29559dbf9c746070812a63e99e1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 20 Sep 2018 03:23:11 +0200 Subject: fileviewer compoonent --- app/client/browser/browser.component.js | 19 ++--- app/client/common/fileViewer.component.js | 57 ++++++++++++++ app/client/common/index.js | 3 +- app/client/socket/socket.actions.js | 2 +- public/assets/css/css.css | 17 +++++ public/bundle.js | 123 ++++++++++++++++++++++++++---- public/bundle.js.map | 2 +- 7 files changed, 193 insertions(+), 30 deletions(-) create mode 100644 app/client/common/fileViewer.component.js (limited to 'app/client/socket/socket.actions.js') diff --git a/app/client/browser/browser.component.js b/app/client/browser/browser.component.js index 5183161..076b4b4 100644 --- a/app/client/browser/browser.component.js +++ b/app/client/browser/browser.component.js @@ -3,18 +3,10 @@ import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import { Route, Link } from 'react-router-dom' -import { Loading, FileList } from '../common' +import { Loading, FileList, FileViewer } from '../common' import actions from '../actions' -/* - at this point we can list files - - filelist should support parentdirectory - - filelist should list directories first - - handle fetching a file from the server - - maybe don't let it fetch if it's larger than 2 megs? -*/ - class Browser extends Component { state = { dir: '/', @@ -36,7 +28,7 @@ class Browser extends Component { fetch(dir) { console.log('fetch', dir) const { module } = this.state - this.setState({ dir, loading: true }) + this.setState({ dir, file: null, loading: true }) actions.socket.list_directory({ module, dir }).then(files => { console.log(files) this.setState({ dir, files, loading: false }) @@ -47,10 +39,10 @@ class Browser extends Component { const { module } = this.state this.setState({ file: null, loadingFile: true }) actions.socket.read_file({ module, fn }).then(file => { + console.log(file) this.setState({ file, loadingFile: false }) }) } - render() { const { app } = this.props const { @@ -60,7 +52,7 @@ class Browser extends Component { console.log(this.props, this.state) return (
-

{dir}

+

{dir}{dir[dir.length-1] !== '/' && '/'}

{app.tool}
{loading && } { console.log('navigate up') - this.fetch(this.state.dir.split('/').slice(0, -1).join('') || '/') + this.fetch(this.state.dir.split('/').slice(0, -1).join('/') || '/') }} /> {loadingFile && } + {file && }
) } diff --git a/app/client/common/fileViewer.component.js b/app/client/common/fileViewer.component.js new file mode 100644 index 0000000..bc71f20 --- /dev/null +++ b/app/client/common/fileViewer.component.js @@ -0,0 +1,57 @@ +import { h, Component } from 'preact' + +const image_types = { + 'jpg': 'image/jpeg', + 'jpeg': 'image/jpeg', + 'png': 'image/png', + 'gif': 'image/gif', +} + +const audio_types = { + 'wav': 'audio/wav', + 'mp3': 'audio/mp3', + 'flac': 'audio/flac', + 'aiff': 'audio/aiff', +} + +const video_types = { + 'mp4': 'video/mp4', +} + +export default function FileViewer({ file }) { + const { + error, + name, path, + date, size, + buf, + } = file + if (error) { + return
{error}
+ } + if (!buf) { + return
File empty
+ } + const ext = name.split('.').slice(-1)[0].toLowerCase() + let tag; + if (ext in image_types) { + tag = + } else if (ext in audio_types) { + tag =