preload sequence, dont overload fileviewer

1 files changed, 25 insertions, 7 deletions

diff --git a/app/client/common/fileViewer.component.js b/app/client/common/fileViewer.component.js
index 72aebd4..b1cabd4 100644
--- a/app/client/common/fileViewer.component.js
+++ b/app/client/common/fileViewer.component.js
@@ -23,19 +23,31 @@ const video_types = {
 
 class FileViewer extends Component {
   state = {
-    loading: true,
+    loading: false,
+    stale: false,
     buffer: {}
   }
 
   fetch() {
-    const { file } = this.props
-    const fn = [file.path, file.name].join('/').replace('//','/')
+    const { file, path } = this.props
+    if (!file) return
+    if (this.state.loading) {
+      this.setState({ stale: true })
+      return
+    }
+    const fn = [path || file.path, file.name].join('/').replace('//','/')
     console.log('fetch file', fn)
     const { tool: module } = this.props.app
     this.setState({ buffer: null, loading: true })
     actions.socket.read_file({ module, fn }).then(buffer => {
-      console.log(buffer)
-      this.setState({ buffer, loading: false })
+      console.log('fetched buffer')
+      const { stale } = this.state
+      this.setState({ buffer, loading: false, stale: false, }, () => {
+        if (stale) {
+          console.log('stale, fetching...')
+          this.fetch()
+        }
+      })
     })
   }
 
@@ -50,6 +62,10 @@ class FileViewer extends Component {
   }
 
   render() {
+    const { file } = this.props
+    if (!file) {
+      return <div className='fileViewer'></div>
+    }
     const { loading, buffer } = this.state
     if (loading) {
       return <div className='fileViewer'>Loading...</div>
@@ -69,14 +85,14 @@ class FileViewer extends Component {
     if (!buf) {
       return <div className='fileViewer'>File empty</div>
     }
-    const ext = name.split('.').slice(-1)[0].toLowerCase()
+    const ext = extension(name)
     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 />
+      tag = <video src={getURLFor(buf, video_types[ext])} controls autoplay />
     } else {
       tag = <div className='text'>{ab2str(buf)}</div>
     }
@@ -95,6 +111,8 @@ const getURLFor = (buf, type) => {
 
 const ab2str = buf => String.fromCharCode.apply(null, new Uint8Array(buf))
 
+const extension = fn => fn.split('.').slice(-1)[0].toLowerCase()
+
 const mapStateToProps = state => ({
   app: state.system.app,
 })