From 5a4de48a6d63cb383832f6ef85b21699a511b755 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 25 May 2018 19:54:38 +0200 Subject: stubbing in a lot of stuff! --- app/client/live/actions.js | 21 ++-- app/client/live/index.js | 252 --------------------------------------------- app/client/live/player.js | 21 ++-- app/client/live/reducer.js | 28 ++--- 4 files changed, 37 insertions(+), 285 deletions(-) delete mode 100644 app/client/live/index.js (limited to 'app/client/live') 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 ( -
- -
-
- - - - - - - - -
-
- - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - - -
-
-
- ) - } -} -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 + "_" + -- cgit v1.2.3-70-g09d2