preload sequence, dont overload fileviewer

3 files changed, 136 insertions, 63 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,
 })
diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.train.js b/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
index ae46fdb..6aade36 100644
--- a/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
+++ b/app/client/modules/pix2pixhd/views/pix2pixhd.train.js
@@ -37,7 +37,8 @@ class Pix2PixHDTrain extends Component {
   }
   componentDidMount(){
     const id = this.props.match.params.id || localStorage.getItem('pix2pixhd.last_id')
-    console.log('load dataset:', id)
+    const dataset = localStorage.getItem('pix2pixhd.last_dataset')
+    console.log('load dataset:', id, dataset)
     const { match, pix2pixhd, actions } = this.props
     if (id === 'new') return
     if (id) {
@@ -48,7 +49,6 @@ class Pix2PixHDTrain extends Component {
     } else {
       this.props.history.push('/pix2pixhd/new/')
     }
-    const dataset = localStorage.getItem('pix2pixhd.last_dataset')
     if (dataset) {
       this.setState({ checkpoint_name: dataset })
     }
@@ -126,7 +126,6 @@ class Pix2PixHDTrain extends Component {
           <Group title='Sequence Editor'>
             <SequenceEditor
               module={pix2pixhdModule}
-              dataset={this.state.checkpoint_name}
               checkpoint={this.props.pix2pixhd.checkpoint}
             />
           </Group>
diff --git a/app/client/modules/pix2pixhd/views/sequence.editor.js b/app/client/modules/pix2pixhd/views/sequence.editor.js
index a749df9..6a5da39 100644
--- a/app/client/modules/pix2pixhd/views/sequence.editor.js
+++ b/app/client/modules/pix2pixhd/views/sequence.editor.js
@@ -7,77 +7,133 @@ import { Loading, FileList, FileViewer } from '../../../common'
 
 import actions from '../../../actions'
 
+const initialState = {
+  dir: '/',
+  frameA: null,
+  frameB: null,
+  selection: null,
+  loading: true
+}
+
+/*
+  when the sequence editor loads,
+    reset the selection
+    reset the two frames
+    set the two frames to the beginning and end of the video
+  when mousing over the video
+    ideally you would see a tiny thumbnail preview of the frame :)
+    - click to start a selection, drag over, mouseup to end the selection
+  this should update the start/end frame
+  ...
+  so there are two things you could do with this
+  1) create an entirely new dataset
+  2) add frames to an existing dataset
+  ...
+  method 1)
+  - requires minimal setup, just a server script which..
+     - creates the new sequence folder
+     - symlinks the frames
+     - runs build_dataset
+     - create appropriate file object, using parent dataset's folder_id
+     - enqueue initial training
+       ---> we can then train on basic subsets, with more control, like we do already...
+     - tell parent dataset thing the new sequence name
+  ...
+  method 2)
+  - requires sequence editor to be aware of its own dataset
+  - requires sequence editor to know whether a sequence is original or not
+*/
+
 class SequenceEditor extends Component {
-  state = {
-    dir: '/',
-    files: [],
-    loading: true
+  state = { ...initialState }
+
+  constructor() {
+    super()
+    this.handleMouseDown = this.handleMouseDown.bind(this)
+    this.handleMouseMove = this.handleMouseMove.bind(this)
+    this.handleMouseEnter = this.handleMouseEnter.bind(this)
+    this.handleMouseLeave = this.handleMouseLeave.bind(this)
+    this.handleMouseUp = this.handleMouseUp.bind(this)
   }
+
   componentDidMount() {
-    this.fetch(this.props.dataset)
+    const { checkpoint } = this.props
+    window.addEventListener('mousemove', this.handleMouseMove)
+    window.addEventListener('mouseup', this.handleMouseUp)
+    if (checkpoint && checkpoint.sequence) {
+      console.log(checkpoint)
+      const frameA = checkpoint.sequence[0]
+      const frameB = checkpoint.sequence[checkpoint.sequence.length-1]
+      this.setState({
+        ...initialState,
+        frameA,
+        frameB,
+      })
+    }
   }
+
   componentDidUpdate(prevProps) {
-    if (this.props.dataset !== prevProps.dataset) {
-      this.fetch(this.props.dataset)
+    const { checkpoint } = this.props
+    if (checkpoint !== prevProps.checkpoint) {
+      console.log(checkpoint)
+      const frameA = checkpoint.sequence[0]
+      const frameB = checkpoint.sequence[checkpoint.sequence.length-1]
+      this.setState({
+        ...initialState,
+        frameA,
+        frameB,
+      })
     }
   }
+
+  componentWillUnmount(){
+    window.removeEventListener('mouseup', this.handleMouseUp)
+    window.removeEventListener('mousemove', this.handleMouseMove)
+  }
+
+  handleMouseDown(e) {
+    this.setState({ dragging: true })
+  }
+  handleMouseMove(e) {
+  }
+  handleMouseEnter(e) {
+  }
+  handleMouseLeave(e) {
+  }
+  handleMouseUp(e) {
+    this.setState({ dragging: false })
+  }
+
   handlePick(file) {
     console.log(file)
-    if (file.dir) {
-      this.fetch([this.state.dir, file.name].join('/').replace('//','/'))
-    } else {
-      this.fetchFile([this.state.dir, file.name].join('/').replace('//','/'))
-    }
-  }
-  fetch(dir) {
-    console.log('fetch', dir)
-    const { name: module } = this.props.module.name
-    this.setState({ dir, file: null, loading: true })
-    actions.socket.list_directory({ module, dir }).then(files => {
-      console.log(files)
-      this.setState({ dir, files, loading: false })
-    })
+    // this.setState({ dir, file: null, loading: true })
   }
+
   render() {
-    const { app } = this.props
+    const { app, checkpoint } = this.props
     const {
-      loading, dir, files,
-      loadingFile, file,
+      loading,
+      selection,
+      frameA, frameB,
     } = this.state
-    console.log(this.props, this.state)
+    // console.log(this.props, this.state)
+    const width = 200
+    const path = "sequences/" + checkpoint.name
     return (
       <div className='sequenceEditor'>
-        <div className='timeline'>
-          <div className='selection'></div>
+        <div
+          className='timeline'
+          style={{ width }}
+          mouseDown={this.handleSelectionStart}
+          mouseEnter={this.handleMouseEnter}
+          mouseLeave={this.handleMouseLeave}
+        >
+          {selection && <div className='selection' style={selection}></div>}
         </div>
+        <FileViewer path={path} file={this.state.frameA} />
+        <FileViewer path={path} file={this.state.frameB} />
       </div>
     )
-    // return (
-    //   <div className='app browser'>
-    //     <h1>{dir}{dir[dir.length-1] !== '/' && '/'}</h1>
-    //     {app.tool}<br/>
-    //     {loading && <Loading />}
-    //     <FileList
-    //       files={files}
-    //       groupDirectories
-    //       parentDirectory={dir !== '/'}
-    //       orderBy='name asc'
-    //       fields={'name datetime size'}
-    //       onClick={(file, e) => {
-    //         e.preventDefault()
-    //         e.stopPropagation()
-    //         console.log('picked a result', file)
-    //         this.handlePick(file)
-    //       }}
-    //       onClickParent={e => {
-    //         console.log('navigate up')
-    //         this.fetch(this.state.dir.split('/').slice(0, -1).join('/') || '/')
-    //       }}
-    //     />
-    //     {loadingFile && <Loading />}
-    //     {file && <FileViewer file={file} />}
-    //   </div>
-    // )
   }
 }