summaryrefslogtreecommitdiff
path: root/app/client/live
diff options
context:
space:
mode:
Diffstat (limited to 'app/client/live')
-rw-r--r--app/client/live/actions.js21
-rw-r--r--app/client/live/index.js252
-rw-r--r--app/client/live/player.js21
-rw-r--r--app/client/live/reducer.js28
4 files changed, 37 insertions, 285 deletions
diff --git a/app/client/live/actions.js b/app/client/live/actions.js
index c9927b3..e63854e 100644
--- a/app/client/live/actions.js
+++ b/app/client/live/actions.js
@@ -1,52 +1,53 @@
import * as socket from '../socket'
+import types from '../types'
export const get_params = () => {
socket.get_params()
- return { type: 'GET_PARAMS', }
+ return { type: types.player.get_params, }
}
export const set_param = (key, value) => {
console.log('set param', key, value)
socket.set_param(key, value)
- return { type: 'SET_PARAM', key, value, }
+ return { type: types.player.set_param, key, value, }
}
export const list_checkpoints = () => {
socket.list_checkpoints()
- return { type: 'LOADING_CHECKPOINTS', }
+ return { type: types.player.loading_checkpoints, }
}
export const list_epochs = (path) => {
socket.list_epochs(path)
- return { type: 'LOADING_EPOCHS', }
+ return { type: types.player.loading_epochs, }
}
export const list_sequences = () => {
socket.list_sequences()
- return { type: 'LOADING_SEQUENCES', }
+ return { type: types.player.loading_sequences }
}
export const load_sequence = (sequence) => {
socket.load_sequence(sequence)
- return { type: 'LOADING_SEQUENCE', }
+ return { type: types.player.loading_sequence, }
}
export const load_epoch = (checkpoint, epoch) => {
socket.load_epoch(checkpoint, epoch)
- return { type: 'LOADING_CHECKPOINT', }
+ return { type: types.player.loading_checkpoint, }
}
export const seek = (frame) => {
socket.seek(frame)
- return { type: 'SEEKING', }
+ return { type: types.player.seeking, }
}
export const pause = (frame) => {
socket.pause(pause)
- return { type: 'PAUSING', }
+ return { type: types.player.pausing, }
}
export const play = (frame) => {
socket.play()
- return { type: 'PLAYING', }
+ return { type: types.player.playing, }
}
diff --git a/app/client/live/index.js b/app/client/live/index.js
deleted file mode 100644
index 94af289..0000000
--- a/app/client/live/index.js
+++ /dev/null
@@ -1,252 +0,0 @@
-import { h, Component } from 'preact'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import Player from '../common/player.component'
-import ParamGroup from '../common/paramGroup.component'
-import Slider from '../common/slider.component'
-import Select from '../common/select.component'
-import Button from '../common/button.component'
-
-import { startRecording, stopRecording, saveFrame } from './player'
-
-import * as liveActions from './actions'
-
-class App extends Component {
- constructor(props){
- super()
- props.actions.get_params()
- props.actions.list_checkpoints()
- props.actions.list_sequences()
- this.changeCheckpoint = this.changeCheckpoint.bind(this)
- this.changeEpoch = this.changeEpoch.bind(this)
- this.changeSequence = this.changeSequence.bind(this)
- this.seek = this.seek.bind(this)
- this.togglePlaying = this.togglePlaying.bind(this)
- this.toggleRecording = this.toggleRecording.bind(this)
- }
- componentWillUpdate(nextProps) {
- if (nextProps.opt.checkpoint_name && nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) {
- this.props.actions.list_epochs(nextProps.opt.checkpoint_name)
- }
- }
- changeCheckpoint(checkpoint_name){
- this.props.actions.load_epoch(checkpoint_name, 'latest')
- }
- changeEpoch(epoch_name){
- this.props.actions.load_epoch(this.props.opt.checkpoint_name, epoch_name)
- }
- changeSequence(sequence){
- console.log('got sequence', sequence)
- this.props.actions.load_sequence(sequence)
- }
- seek(percentage){
- const frame = Math.floor(percentage * (parseInt(this.props.frame.sequence_len) || 1) + 1)
- this.props.actions.seek(frame)
- }
- togglePlaying(){
- if (this.props.opt.processing) {
- this.props.actions.pause()
- } else {
- this.props.actions.play()
- }
- }
- toggleRecording(){
- if (this.props.opt.recording){
- stopRecording()
- this.props.actions.pause()
- } else {
- startRecording()
- }
- }
- render(){
- return (
- <div className='app'>
- <Player width={424} height={256} />
- <div className='params'>
- <div className='column'>
- <ParamGroup
- title='Playback'
- noToggle
- >
- <Select
- name='send_image'
- title='view mode'
- options={['a','b','sequence','recursive']}
- />
- <Select
- name='sequence_name'
- title='sequence'
- options={this.props.sequences}
- onChange={this.changeSequence}
- />
- <Select
- name='checkpoint_name'
- title='checkpoint'
- options={this.props.checkpoints}
- onChange={this.changeCheckpoint}
- />
- <Select
- name='epoch'
- title='epoch'
- options={this.props.epochs}
- onChange={this.changeEpoch}
- />
- <Slider
- name='position'
- min={0.0} max={1.0} type='float'
- value={(this.props.frame.sequence_i || 0) / (this.props.frame.sequence_len || 1)}
- onChange={this.seek}
- />
- <Button
- title={'Processing: ' + (this.props.opt.processing ? 'yes' : 'no')}
- onClick={this.togglePlaying}
- >
- {this.props.opt.processing ? 'Pause' : 'Restart'}
- </Button>
- <Button
- title={
- this.props.opt.savingVideo
- ? 'Saving video...'
- : this.props.opt.recording
- ? 'Recording (' + timeInSeconds(this.props.opt.recordFrames) +')'
- : 'Record video'
- }
- onClick={this.toggleRecording}
- >
- {this.props.opt.savingVideo ? 'Saving' : this.props.opt.recording ? 'Recording' : 'Record'}
- </Button>
- <Button
- title={'Save frame'}
- onClick={saveFrame}
- >
- Save
- </Button>
- </ParamGroup>
- </div>
- <div className='column'>
- <ParamGroup
- title='Transition'
- name='transition'
- >
- <Slider
- name='transition_period'
- min={10} max={5000} type='int'
- />
- <Slider
- name='transition_min'
- min={0.001} max={0.2} type='float'
- />
- <Slider
- name='transition_max'
- min={0.1} max={1.0} type='float'
- />
- </ParamGroup>
-
- <ParamGroup
- title='Recursion'
- name='recursive'
- >
- <Slider
- name='recursive_frac'
- min={0.0} max={0.5} type='float'
- />
- <Slider
- name='recurse_roll'
- min={-64} max={64} type='int'
- />
- <Slider
- name='recurse_roll_axis'
- min={0} max={1} type='int'
- />
- </ParamGroup>
-
- <ParamGroup
- title='Sequence'
- name='sequence'
- >
- <Slider
- name='sequence_frac'
- min={0.0} max={0.5} type='float'
- />
- <Slider
- name='process_frac'
- min={0} max={1} type='float'
- />
- </ParamGroup>
- </div>
- <div className='column'>
- <ParamGroup
- title='Clahe'
- name='clahe'
- >
- <Slider
- name='clip_limit'
- min={1.0} max={4.0} type='float'
- />
- </ParamGroup>
-
- <ParamGroup
- title='Posterize'
- name='posterize'
- >
- <Slider
- name='spatial_window'
- min={2} max={128} type='int'
- />
- <Slider
- name='color_window'
- min={2} max={128} type='int'
- />
- </ParamGroup>
-
- <ParamGroup
- title='Blur'
- name='blur'
- >
- <Slider
- name='blur_radius'
- min={3} max={7} type='odd'
- />
- <Slider
- name='blur_sigma'
- min={0} max={2} type='float'
- />
- </ParamGroup>
-
- <ParamGroup
- title='Canny Edge Detection'
- name='canny'
- >
- <Slider
- name='canny_lo'
- min={10} max={200} type='int'
- />
- <Slider
- name='canny_hi'
- min={10} max={200} type='int'
- />
- </ParamGroup>
-
- </div>
- </div>
- </div>
- )
- }
-}
-function timeInSeconds(n){
- return (n / 10).toFixed(1) + ' s.'
-}
-const mapStateToProps = state => ({
- opt: state.live.opt,
- frame: state.live.frame,
- checkpoints: state.live.checkpoints,
- epochs: state.live.epochs,
- sequences: state.live.sequences,
-})
-
-const mapDispatchToProps = (dispatch, ownProps) => ({
- actions: bindActionCreators(liveActions, dispatch)
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(App)
diff --git a/app/client/live/player.js b/app/client/live/player.js
index b39d717..ac5f0c8 100644
--- a/app/client/live/player.js
+++ b/app/client/live/player.js
@@ -1,5 +1,6 @@
import { store } from '../store'
import Whammy from './whammy'
+import types from '../types'
let fps = 0, last_frame
let recording = false, saving = false
@@ -9,7 +10,7 @@ export function startRecording(){
videoWriter = new Whammy.Video(10)
recording = true
store.dispatch({
- type: 'START_RECORDING',
+ type: types.player.start_recording,
})
}
@@ -17,12 +18,12 @@ export function stopRecording(){
if (!recording) return
recording = false
store.dispatch({
- type: 'SAVING_VIDEO',
+ type: types.player.saving_video,
})
videoWriter.compile(false, function(blob){
- console.log(blob)
+ // console.log(blob)
store.dispatch({
- type: 'SAVE_VIDEO',
+ type: types.player.save_video,
blob: blob,
})
})
@@ -37,23 +38,25 @@ export function onFrame (data) {
const url = URL.createObjectURL(blob)
const img = new Image ()
img.onload = function() {
+ img.onload = null
last_frame = data.meta
URL.revokeObjectURL(url)
- const canvas = document.querySelector('.player canvas')
+ let canvas = document.querySelector('.player canvas')
+ if (! canvas) return console.error('no canvas for frame')
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
if (recording) {
console.log('record frame')
videoWriter.add(canvas)
store.dispatch({
- type: 'ADD_RECORD_FRAME',
+ type: types.player.add_record_frame,
})
}
if (saving) {
saving = false
canvas.toBlob(function(blob) {
store.dispatch({
- type: 'SAVE_FRAME',
+ type: types.player.save_frame,
blob: blob,
})
})
@@ -65,11 +68,11 @@ export function onFrame (data) {
setInterval(() => {
store.dispatch({
- type: 'SET_FPS',
+ type: types.player.set_fps,
fps: fps,
})
store.dispatch({
- type: 'CURRENT_FRAME',
+ type: types.player.current_frame,
meta: last_frame,
})
fps = 0
diff --git a/app/client/live/reducer.js b/app/client/live/reducer.js
index 8fa6edd..60bcb41 100644
--- a/app/client/live/reducer.js
+++ b/app/client/live/reducer.js
@@ -1,6 +1,6 @@
-import { combineReducers } from 'redux'
import moment from 'moment'
-let FileSaver = require('file-saver')
+import FileSaver from 'file-saver'
+import types from '../types'
const liveInitialState = {
loading: false,
@@ -17,7 +17,7 @@ const liveReducer = (state = liveInitialState, action) => {
let results;
switch(action.type) {
- case 'LOAD_PARAMS':
+ case types.player.load_params:
if (! action.opt || ! Object.keys(action.opt).length) {
return state
}
@@ -28,7 +28,7 @@ const liveReducer = (state = liveInitialState, action) => {
opt: action.opt,
}
- case 'SET_PARAM':
+ case types.player.set_param:
return {
...state,
opt: {
@@ -37,14 +37,14 @@ const liveReducer = (state = liveInitialState, action) => {
}
}
- case 'LIST_CHECKPOINTS':
+ case types.player.list_checkpoints:
return {
...state,
checkpoints: action.checkpoints,
epochs: [],
}
- case 'LIST_EPOCHS':
+ case types.player.list_epochs:
return {
...state,
epochs: (action.epochs || []).map(a => [ a == 'latest' ? Infinity : a, a ])
@@ -52,25 +52,25 @@ const liveReducer = (state = liveInitialState, action) => {
.map(a => a[1])
}
- case 'LIST_SEQUENCES':
+ case types.player.list_sequences:
return {
...state,
sequences: action.sequences,
}
- case 'SET_FPS':
+ case types.player.set_fps:
return {
...state,
fps: action.fps,
}
- case 'CURRENT_FRAME':
+ case types.player.current_frame:
return action.meta ? {
...state,
frame: action.meta
} : state
- case 'START_RECORDING':
+ case types.player.start_recording:
return {
...state,
opt: {
@@ -78,7 +78,7 @@ const liveReducer = (state = liveInitialState, action) => {
recording: true,
}
}
- case 'ADD_RECORD_FRAME':
+ case types.player.add_record_frame:
return {
...state,
opt: {
@@ -87,7 +87,7 @@ const liveReducer = (state = liveInitialState, action) => {
}
}
- case 'SAVE_FRAME':
+ case types.player.save_frame:
FileSaver.saveAs(
action.blob,
state.opt.checkpoint_name + "_" +
@@ -96,7 +96,7 @@ const liveReducer = (state = liveInitialState, action) => {
)
return state
- case 'SAVING_VIDEO':
+ case types.player.saving_video:
return {
...state,
opt: {
@@ -104,7 +104,7 @@ const liveReducer = (state = liveInitialState, action) => {
savingVideo: true,
}
}
- case 'SAVE_VIDEO':
+ case types.player.save_video:
FileSaver.saveAs(
action.blob,
state.opt.checkpoint_name + "_" +
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 14:25:37 +0000