adding timeline component

1 files changed, 60 insertions, 27 deletions

diff --git a/app/client/common/fileViewer.component.js b/app/client/common/fileViewer.component.js
index d98073b..4938650 100644
--- a/app/client/common/fileViewer.component.js
+++ b/app/client/common/fileViewer.component.js
@@ -21,11 +21,37 @@ const video_types = {
   'mp4': 'video/mp4',
 }
 
+const THROTTLE_FETCH_TIME = 200
+
 class FileViewer extends Component {
   state = {
     loading: false,
     stale: false,
-    buffer: {}
+    buffer: {},
+    url: null,
+  }
+
+  componentDidMount(){
+    this.fetch()
+  }
+
+  componentDidUpdate(prevProps){
+    if (this.props.file !== prevProps.file) {
+      this.deferFetch()
+    }
+  }
+
+  componentWillUnmount(){
+    if (this.state.url) {
+      window.URL.revokeObjectURL(this.state.url)
+    }
+  }
+
+  deferFetch(){
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      this.fetch()
+    }, THROTTLE_FETCH_TIME)
   }
 
   fetch() {
@@ -40,48 +66,56 @@ class FileViewer extends Component {
     this.setState({ buffer: null, loading: true })
 
     if (thumbnail) {
-      console.log('fetch thumbnail', fn)
+      // console.log('fetch thumbnail', fn)
       const size = parseInt(thumbnail) || 200
       actions.socket
         .thumbnail({ module, fn, size })
         .then(this.loadBuffer.bind(this))
     } else {
-      console.log('fetch file', fn)
+      // console.log('fetch file', fn)
       actions.socket
         .read_file({ module, fn })
         .then(this.loadBuffer.bind(this))
     }
   }
+
   loadBuffer(buffer) {
-    console.log('fetched buffer', buffer)
+    // console.log('fetched buffer', buffer)
+    const { name, buf } = buffer
+    const ext = extension(name)
+    if (this.state.url) {
+      window.URL.revokeObjectURL(this.state.url)
+    }
+    let url
+    if (buf) {
+      if (ext in image_types) {
+        url = getURLFor(buf, image_types[ext])
+      } else if (ext in audio_types) {
+        url = getURLFor(buf, audio_types[ext])
+      } else if (ext in video_types) {
+        url = getURLFor(buf, video_types[ext])
+      } else {
+        url = ab2str(buf)
+      }
+    }
     const { stale } = this.state
-    this.setState({ buffer, loading: false, stale: false, }, () => {
-      console.log('loaded')
+    this.setState({ ext, url, buffer, loading: false, stale: false, }, () => {
+      // console.log('loaded')
       if (stale) {
-        console.log('stale, fetching...')
+        // console.log('stale, fetching...')
         this.fetch()
       }
     })
   }
 
-  componentDidMount(){
-    this.fetch()
-  }
-
-  componentDidUpdate(nextProps){
-    if (this.props.file !== nextProps.file) {
-      this.fetch()
-    }
-  }
-
   render() {
     const { file } = this.props
     if (!file) {
       return <div className='fileViewer'></div>
     }
-    const { loading, buffer } = this.state
+    const { loading, buffer, url, ext } = this.state
     if (loading) {
-      return <div className='fileViewer'>Loading...</div>
+      return <div className='fileViewer'><span>Loading...</span></div>
     }
     const {
       error,
@@ -90,24 +124,23 @@ class FileViewer extends Component {
       buf,
     } = buffer
     if (error) {
-      return <div className='fileViewer'>{error}</div>
+      return <div className='fileViewer'><span>{error}</span></div>
     }
     if (!name) {
       return <div className='fileViewer'></div>
     }
-    if (!buf) {
-      return <div className='fileViewer'>File empty</div>
+    if (!buf || !url) {
+      return <div className='fileViewer'><span>File empty</span></div>
     }
-    const ext = extension(name)
     let tag;
     if (ext in image_types) {
-      tag = <img src={getURLFor(buf, image_types[ext])} />
+      tag = <img src={url} />
     } else if (ext in audio_types) {
-      tag = <audio src={getURLFor(buf, audio_types[ext])} controls autoplay />
+      tag = <audio src={url} controls autoplay />
     } else if (ext in video_types) {
-      tag = <video src={getURLFor(buf, video_types[ext])} controls autoplay />
+      tag = <video src={url} controls autoplay />
     } else {
-      tag = <div className='text'>{ab2str(buf)}</div>
+      tag = <div className='text'>{url}</div>
     }
     return (
       <div className='fileViewer'>{tag}</div>