1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
import { h, Component } from 'preact'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Route, Link } from 'react-router-dom'
import moment from 'moment/min/moment.min'
import util from '../../../util'
import { FileViewer, Timeline, Param, Button, Group, TextInput } from '../../../common'
import * as pix2pixhdTasks from '../pix2pixhd.tasks'
import actions from '../../../actions'
const initialState = {
dir: '/',
cursor: null,
selection: null,
title: null,
}
class SequenceEditor extends Component {
state = { ...initialState }
constructor() {
super()
this.handleCursor = this.handleCursor.bind(this)
this.handleSelect = this.handleSelect.bind(this)
}
componentDidMount() {
const { checkpoint } = this.props
if (checkpoint) {
this.reset()
}
}
componentDidUpdate(prevProps) {
const { checkpoint } = this.props
if (checkpoint !== prevProps.checkpoint) {
this.reset()
}
}
reset(){
const { checkpoint } = this.props
if (!(checkpoint && checkpoint.sequence)) return
// console.log(checkpoint)
this.setState({
...initialState,
title: checkpoint.name + '_' + moment().format("YYYYMMDD")
})
}
handleCursor(cursor) {
this.setState({ cursor })
}
handleSelect(selection) {
this.setState({ selection })
}
render() {
const { app, pix2pixhd, remote, checkpoint, folder_id, processed } = this.props
const { cursor, selection, title } = this.state
const path = "sequences/" + checkpoint.name
// console.log(checkpoint, pix2pixhd)
return (
<div className='sequenceEditor row'>
{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>
<Group title='New dataset'>
<TextInput
title='Title dataset'
value={title}
onInput={title => this.setState({ title: title.replace(/ /g, '_').replace(/\/\./g, '') })}
/>
<Button
title='Create a new dataset?'
onClick={() => remote.splice_task({ title, sequence: checkpoint.name, selection, folder_id })}
>
Create
</Button>
</Group>
<Group title='Salt dataset'>
{processed
? 'Salting coming soon!'
: 'Salting coming soon to processed datasets.'}
</Group>
</div>
: <div className='form'><Group title='New dataset'>Please select some frames</Group></div>
}
<div className='rows'>
<div className='row'>
<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} />
}
</div>
<Timeline
sequence={checkpoint.sequence}
onCursor={this.handleCursor}
onSelect={this.handleSelect}
/>
</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,
pix2pixhd: state.module.pix2pixhd,
})
const mapDispatchToProps = (dispatch, ownProps) => ({
remote: bindActionCreators(pix2pixhdTasks, dispatch),
})
export default connect(mapStateToProps, mapDispatchToProps)(SequenceEditor)
|
