piano/js/components/Control.js

/*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 {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);
        }
    });
}());