138 lines
4.4 KiB
JavaScript
138 lines
4.4 KiB
JavaScript
/*jshint browser:true */
|
|
/*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 {halt: function} Called to temporarily halt playback
|
|
* @prop {resume: function} Called to resume halted 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,
|
|
halt: React.PropTypes.func,
|
|
resume: 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 () {},
|
|
halt: function () {},
|
|
resume: 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: 'bt icon ' + ((this.props.playing) ?
|
|
'switch-play-state pause' : 'switch-play-state'),
|
|
onClick: this.switchPlayState
|
|
}, 'Play/pause'));
|
|
|
|
controls.push(React.DOM.button({
|
|
key: 'openChannelsWindow',
|
|
className: 'bt icon open-channels-window',
|
|
onClick: this.props.showChannelsModal
|
|
}, 'Ouvrir le gestionnaire de canaux'));
|
|
|
|
controls.push(App.components.UI.Selector({
|
|
key: 'setPlaySpeed',
|
|
className: 'bt 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: 'bt icon close',
|
|
|
|
onClick: this.props.close
|
|
}));
|
|
} else {
|
|
controls.push(React.DOM.button({
|
|
key: 'close',
|
|
className: 'bt icon close',
|
|
|
|
onClick: window.close
|
|
}));
|
|
}
|
|
|
|
return React.DOM.div({
|
|
className: 'control'
|
|
}, controls);
|
|
}
|
|
});
|
|
}()); |