piano/js/components/Control.js

129 lines
4.0 KiB
JavaScript

/*globals App, React */
(function () {
'use strict';
/**
* Sidebar controls
*
* @prop {playing: bool} Whether a song is playing or not
* @prop {opened: bool} Whether a file is opened
* @prop {speed: number} Current speed rate
* @prop {play: function} Called to start playback
* @prop {pause: function} Called to pause playback
* @prop {showChannelsModal: function} Called to show channels manager
* @prop {setPlaySpeed: function} Called to set play speed
* @prop {close: function} Called to close
*/
App.components.create({
displayName: 'Control',
mixins: [React.addons.PureRenderMixin],
propTypes: {
playing: React.PropTypes.bool,
opened: React.PropTypes.bool,
speed: React.PropTypes.number,
play: React.PropTypes.func,
pause: React.PropTypes.func,
showChannelsModal: React.PropTypes.func,
setPlaySpeed: React.PropTypes.func,
close: React.PropTypes.func
},
getDefaultProps: function () {
return {
playing: false,
opened: false,
play: function () {},
pause: function () {},
showChannelsModal: function () {},
setPlaySpeed: function () {},
close: function () {}
};
},
/**
* Keyboard shortcuts
*/
componentDidMount: function () {
window.addEventListener('keyup', this.keyUp);
},
componentWillUnmount: function () {
window.removeEventListener('keyup', this.keyUp);
},
keyUp: function (e) {
var code = e.keyCode, index;
// space: switch state
if (code === 32) {
this.switchPlayState();
e.preventDefault();
}
},
/**
* Delegates
*/
switchPlayState: function () {
if (this.props.playing) {
this.props.pause();
} else {
this.props.play();
}
},
/**
* Render control
*/
render: function () {
var controls = [];
if (this.props.opened) {
controls.push(React.DOM.button({
key: 'switchPlayState',
className: (this.props.playing) ?
'switch-play-state pause' : 'switch-play-state',
onClick: this.switchPlayState
}, 'Play/pause'));
controls.push(React.DOM.button({
key: 'openChannelsWindow',
className: 'open-channels-window',
onClick: this.props.showChannelsModal
}, 'Ouvrir le gestionnaire de canaux'));
controls.push(App.components.UI.Selector({
key: 'setPlaySpeed',
className: 'set-play-speed',
values: [1, 0.5, 0.3, 1, 2, 3],
value: this.props.speed,
onChange: this.props.setPlaySpeed
}));
controls.push(React.DOM.button({
key: 'close',
className: 'close',
onClick: this.props.close
}));
} else {
controls.push(React.DOM.button({
key: 'close',
className: 'close',
onClick: window.close
}));
}
return React.DOM.div({
className: 'control'
}, controls);
}
});
}());