hsl sliders

5 files changed, 36 insertions, 2 deletions

diff --git a/app/client/common/player.component.js b/app/client/common/player.component.js
index 6b3d56f..546c650 100644
--- a/app/client/common/player.component.js
+++ b/app/client/common/player.component.js
@@ -2,8 +2,9 @@ import { h, Component } from 'preact'
 import { connect } from 'react-redux'
 
 function Player(props) {
+  const className = props.fullscreen ? 'player fullscreen' : 'player'
   return (
-    <div className='player'>
+    <div className={className}>
       <canvas width={props.width} height={props.height} />
     </div>
   )
diff --git a/app/client/live/live.actions.js b/app/client/live/live.actions.js
index a9cbdb3..c4d29f7 100644
--- a/app/client/live/live.actions.js
+++ b/app/client/live/live.actions.js
@@ -14,6 +14,10 @@ export const set_param = (key, value) => {
   return { type: types.player.set_param, key, value, }
 }
 
+export const set_fullscreen = (value) => {
+  return { type: types.player.set_fullscreen, value }
+}
+
 export const list_checkpoints = (module) => {
   socket.live.list_checkpoints(module)
   return { type: types.player.loading_checkpoints, }
diff --git a/app/client/live/live.reducer.js b/app/client/live/live.reducer.js
index 3a5b661..cb9e8a4 100644
--- a/app/client/live/live.reducer.js
+++ b/app/client/live/live.reducer.js
@@ -12,6 +12,7 @@ const liveInitialState = {
   fps: 0,
   playing: false,
   last_message: '',
+  fullscreen: false,
   frame: { i: 0, sequence_i: 0, sequence_len: '1' }
 }
 
@@ -38,6 +39,12 @@ const liveReducer = (state = liveInitialState, action) => {
         }
       }
 
+    case types.player.set_fullscreen:
+      return {
+        ...state,
+        fullscreen: action.value,
+      }
+
     case types.socket.list_checkpoints:
       return {
         ...state,
diff --git a/app/client/modules/pix2pixhd/views/pix2pixhd.live.js b/app/client/modules/pix2pixhd/views/pix2pixhd.live.js
index 14cb5a6..01bac9e 100644
--- a/app/client/modules/pix2pixhd/views/pix2pixhd.live.js
+++ b/app/client/modules/pix2pixhd/views/pix2pixhd.live.js
@@ -29,12 +29,31 @@ class Pix2PixHDLive extends Component {
     this.seek = this.seek.bind(this)
     this.togglePlaying = this.togglePlaying.bind(this)
     this.toggleRecording = this.toggleRecording.bind(this)
+    this.handleKeydown = this.handleKeydown.bind(this)
+  }
+  componentWillMount() {
+    document.addEventListener('keydown', this.handleKeydown)
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeydown)
   }
   componentWillUpdate(nextProps) {
     if (nextProps.opt.checkpoint_name && nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) {
       this.props.actions.live.list_epochs('pix2pixhd', nextProps.opt.checkpoint_name)
     }
   }
+  handleKeydown(e){
+    console.log(e.keyCode)
+    if (e.altKey || e.ctrlKey || e.metaKey) return
+    switch (e.keyCode) {
+      case 27: // esc
+        e.preventDefault()
+        this.props.actions.live.set_fullscreen(!this.props.fullscreen)
+        break
+      default:
+        break
+    }
+  }
   changeCheckpoint(field, checkpoint_name){
     this.props.actions.live.load_epoch(checkpoint_name, 'latest')
   }
@@ -84,7 +103,7 @@ class Pix2PixHDLive extends Component {
     }
     return (
       <div className='app centered'>
-        <Player width={424} height={256} />
+        <Player width={424} height={256} fullscreen={this.props.fullscreen} />
         <div className='params row'>
           <div className='column'>
             <ParamGroup
@@ -355,6 +374,7 @@ function timeInSeconds(n){
 }
 const mapStateToProps = state => ({
   last_message: state.live.last_message,
+  fullscreen: state.live.fullscreen,
   opt: state.live.opt,
   frame: state.live.frame,
   checkpoints: state.live.checkpoints,
diff --git a/app/client/types.js b/app/client/types.js
index c41a03d..d12ac91 100644
--- a/app/client/types.js
+++ b/app/client/types.js
@@ -75,6 +75,8 @@ export default {
 		save_frame: 'SAVE_FRAME',
 		saving_video: 'SAVING_VIDEO',
 		save_video: 'SAVE_VIDEO',
+
+		set_fullscreen: 'SET_FULLSCREEN',
 	},
 	audioPlayer: {
 		play: 'AUDIO_PLAY',