From e2c13867baf66a6ae22c975563f8755e782d07a9 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 23 Sep 2018 18:34:30 +0200
Subject: adding timeline component

---
 .../modules/pix2pixhd/views/sequence.editor.js     | 131 ++++++++++-----------
 1 file changed, 59 insertions(+), 72 deletions(-)

(limited to 'app/client/modules')

diff --git a/app/client/modules/pix2pixhd/views/sequence.editor.js b/app/client/modules/pix2pixhd/views/sequence.editor.js
index e66aebf..3bf2d63 100644
--- a/app/client/modules/pix2pixhd/views/sequence.editor.js
+++ b/app/client/modules/pix2pixhd/views/sequence.editor.js
@@ -3,28 +3,19 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { Route, Link } from 'react-router-dom'
 
-import { Loading, FileList, FileViewer } from '../../../common'
+import util from '../../../util'
+
+import { FileViewer, Timeline, Param, Button } from '../../../common'
 
 import actions from '../../../actions'
 
 const initialState = {
   dir: '/',
-  frameA: null,
-  frameB: null,
+  cursor: 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
@@ -49,94 +40,90 @@ class SequenceEditor extends Component {
 
   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)
+    this.handleCursor = this.handleCursor.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
   }
 
   componentDidMount() {
     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,
-      })
+    if (checkpoint) {
+      this.reset()
     }
   }
 
   componentDidUpdate(prevProps) {
     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,
-      })
+      this.reset()
     }
   }
 
-  componentWillUnmount(){
-    window.removeEventListener('mouseup', this.handleMouseUp)
-    window.removeEventListener('mousemove', this.handleMouseMove)
+  reset(){
+    const { checkpoint } = this.props
+    if (!(checkpoint && checkpoint.sequence)) return
+    console.log(checkpoint)
+    this.setState({
+      ...initialState,
+    })
   }
 
-  handleMouseDown(e) {
-    this.setState({ dragging: true })
-  }
-  handleMouseMove(e) {
-  }
-  handleMouseEnter(e) {
-  }
-  handleMouseLeave(e) {
-  }
-  handleMouseUp(e) {
-    this.setState({ dragging: false })
+  handleCursor(cursor) {
+    this.setState({ cursor })
   }
 
-  handlePick(file) {
-    console.log(file)
-    // this.setState({ dir, file: null, loading: true })
+  handleSelect(selection) {
+    this.setState({ selection })
   }
 
   render() {
     const { app, checkpoint } = this.props
-    const {
-      loading,
-      selection,
-      frameA, frameB,
-    } = this.state
-    // console.log(this.props, this.state)
-    const width = 200
+    const { cursor, selection } = this.state
     const path = "sequences/" + checkpoint.name
     return (
       <div className='sequenceEditor'>
-        <div
-          className='timeline'
-          style={{ width }}
-          mouseDown={this.handleSelectionStart}
-          mouseEnter={this.handleMouseEnter}
-          mouseLeave={this.handleMouseLeave}
-        >
-          {selection && <div className='selection' style={selection}></div>}
-        </div>
-        <FileViewer thumbnail path={path} file={this.state.frameA} />
-        <FileViewer thumbnail path={path} file={this.state.frameB} />
+        <Timeline
+          sequence={checkpoint.sequence}
+          onCursor={this.handleCursor}
+          onSelect={this.handleSelect}
+        />
+        <Frame label='Cursor' path={path} frame={cursor} />
+        {selection && selection.start && 
+          <Frame label='Selection Start' path={path} frame={selection.start} />
+        }
+        {selection && selection.end && 
+          <Frame label='Selection End' path={path} frame={selection.end} />
+        }
+        {selection &&
+          <div className='form'>
+            <Param
+              title='Selection length'
+            >{selection.end.i - selection.start.i}{' frames'}</Param>
+            <Param
+              title='Duration'
+            >{util.frameTimestamp(selection.end.i - selection.start.i)}</Param>
+            <Button
+              title='Create a new dataset?'
+            >Create</Button>
+          </div>
+        }
       </div>
     )
   }
 }
 
+function Frame ({ label, path, frame }) {
+  if (!frame) return <div class='frame'></div>
+  return (
+    <div class='frame'>
+      <FileViewer thumbnail={140} path={path} file={frame.frame} />
+      <div class='spaced'>
+        <span>{label}</span>
+        <span>{'#'}{frame.i} {util.frameTimestamp(frame.i)}</span>
+      </div>
+    </div>
+  )
+}
+
 const mapStateToProps = state => ({
   app: state.system.app,
 })
-- 
cgit v1.2.3-70-g09d2