fileviewer compoonent

4 files changed, 66 insertions, 15 deletions

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 (
       <div className='app browser'>
-        <h1>{dir}</h1>
+        <h1>{dir}{dir[dir.length-1] !== '/' && '/'}</h1>
         {app.tool}<br/>
         {loading && <Loading />}
         <FileList
@@ -77,10 +69,11 @@ class Browser extends Component {
           }}
           onClickParent={e => {
             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 && <Loading />}
+        {file && <FileViewer file={file} />}
       </div>
     )
   }
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 <div className='fileViewer'>{error}</div>
+  }
+  if (!buf) {
+    return <div className='fileViewer'>File empty</div>
+  }
+  const ext = name.split('.').slice(-1)[0].toLowerCase()
+  let tag;
+  if (ext in image_types) {
+    tag = <img src={getURLFor(buf, image_types[ext])} />
+  } else if (ext in audio_types) {
+    tag = <audio src={getURLFor(buf, audio_types[ext])} controls autoplay />
+  } else if (ext in video_types) {
+    tag = <video src={getURLFor(buf, audio_types[ext])} controls autoplay />
+  } else {
+    tag = <div className='text'>{ab2str(buf)}</div>
+  }
+  return (
+    <div className='fileViewer'>{tag}</div>
+  )
+}
+
+const getURLFor = (buf, type) => {
+  const arrayBufferView = new Uint8Array(buf)
+  const blob = new Blob([arrayBufferView], { type })
+  const urlCreator = window.URL || window.webkitURL
+  return urlCreator.createObjectURL(blob)
+}
+
+const ab2str = buf => String.fromCharCode.apply(null, new Uint8Array(buf))
diff --git a/app/client/common/index.js b/app/client/common/index.js
index e6baafc..ffb852d 100644
--- a/app/client/common/index.js
+++ b/app/client/common/index.js
@@ -6,6 +6,7 @@ import Checkbox from './checkbox.component'
 import CurrentTask from './currentTask.component'
 import { FileList, FileRow } from './fileList.component'
 import FileUpload from './fileUpload.component'
+import FileViewer from './fileViewer.component'
 import FolderList from './folderList.component'
 import Gallery from './gallery.component'
 import Group from './group.component'
@@ -26,7 +27,7 @@ import * as Views from './views'
 export {
   Views,
   Loading, Progress, Header, AudioPlayer,
-  FolderList, FileList, FileRow, FileUpload,
+  FolderList, FileList, FileRow, FileUpload, FileViewer,
   Gallery, Player,
   Group, ParamGroup, Param,
   TextInput, NumberInput,
diff --git a/app/client/socket/socket.actions.js b/app/client/socket/socket.actions.js
index 4bae3b3..31d73cc 100644
--- a/app/client/socket/socket.actions.js
+++ b/app/client/socket/socket.actions.js
@@ -8,7 +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 read_file          = opt => syscall_async('read_file', opt).then(res => res.file)
 
 export const syscall_async = (tag, payload, ttl=10000) => {
   ttl = payload.ttl || ttl