piano/js/components/Channel/Channel.js

/*jshint browser:true */
/*globals React, App */

(function () {
    'use strict';

    /**
     * Display a channel
     *
     * @prop {id: number}           Channel ID
     * @prop {program: number}      Program number
     * @prop {sound: bool}          Whether sound should be played or not
     * @prop {notes: bool}          Whether notes should be displayed or not
     * @prop {switch: func}         Called to switch a param
     */
    App.components.create('Channel', {
        displayName: 'Channel',
        mixins: [React.addons.PureRenderMixin],
        
        statics: {
            programs: [
                'Grand piano acoustique',
                'Piano acoustique',
                'Grand piano électrique',
                'Piano bastringue',
                'Piano électrique',
                'Piano - effet chorus',
                'Clavecin',
                'Clavinet',
                'Celesta',
                'Glockenspiel',
                'Boîte à musique',
                'Vibraphone',
                'Marimba',
                'Xylophone',
                'Cloches tubulaires',
                'Tympanon',
                'Orgue Hammond',
                'Orgue à percussion',
                'Orgue - Rock',
                'Grandes orgues',
                'Harmonium',
                'Accordéon',
                'Harmonica',
                'Accordéon tango',
                'Guitare classique',
                'Guitare sèche',
                'Guitare électrique - Jazz',
                'Guitare électrique - son clair',
                'Guitare électrique - sourdine',
                'Guitare saturée',
                'Guitare avec distorsion',
                'Harmoniques de guitare',
                'Basse acoustique sans frettes',
                'Basse électrique',
                'Basse électrique - médiator',
                'Basse sans frettes',
                'Basse - slap 1',
                'Basse - slap 2',
                'Basse synthé 1',
                'Basse synthé 2',
                'Violon',
                'Violon alto',
                'Violoncelle',
                'Contrebasse',
                'Cordes - trémolo',
                'Cordes - pizzicato',
                'Harpe',
                'Timbales',
                'Ensemble acoustique à Cordes 1',
                'Ensemble acoustique à Cordes 2',
                'Cordes synthé 1',
                'Cordes synthé 2',
                'Chœur - "Aah"',
                'Voix - "Ooh"',
                'Voix synthétique',
                'Coup d\'orchestre',
                'Trompette',
                'Trombone',
                'Tuba',
                'trompette en sourdine',
                'Cor d\'harmonie',
                'Section de cuivres',
                'Cuivres synthé',
                'Cuivres synthé',
                'Saxophone soprano',
                'Saxophone alto',
                'Saxophone ténor',
                'Saxophone baryton',
                'Hautbois',
                'Cor anglais',
                'Basson',
                'Clarinette',
                'Piccolo',
                'Flûte',
                'Flûte à bec',
                'Flûte de pan',
                'Bouteille - souffle',
                'Shakuhachi',
                'Sifflet',
                'Ocarina',
                'Signal carré',
                'Signal dents de scie',
                'Orgue à vapeur',
                'Chiffer',
                'Charang',
                'Voix solo',
                'Signal dent de scie en quinte',
                'Basse & Solo',
                'Fantaisie',
                'Son chaleureux',
                'Polysynthé',
                'Chœur',
                'Archet',
                'Métallique',
                'Halo',
                'Balai',
                'Pluie de glace',
                'Trames sonores',
                'Cristal',
                'Atmosphère',
                'Brillance',
                'Gobelins',
                'Échos',
                'Espace',
                'Sitar',
                'Banjo',
                'Shamisen',
                'Koto',
                'Kalimba',
                'Cornemuse',
                'Viole',
                'Shehnai',
                'Clochettes',
                'Agogo',
                'Batterie métallique',
                'Planchettes',
                'Timbales',
                'Tom mélodique',
                'Tambour synthétique',
                'Cymbale - inversée',
                'Guitare - bruit de frette',
                'Respiration',
                'Rivage',
                'Gazouilli',
                'Sonnerie de téléphone',
                'Hélicoptère',
                'Applaudissements',
                'Coup de feu'
            ],
            
            types: [
                'piano',
                'percussive',
                'percussion',
                'effect',
                'brass',
                'pipe',
                'string',
                'synth',
                'guitar',
                'orchestra',
                'bass',
                'organ'
            ],
            
            getType: function (id) {
                var types = App.components.Channel.Channel.types;
                
                if (id >= 0 && id <= 7) {
                    return types[0];
                } else if ((id >= 8 && id <= 15) || (id >= 104 && id <= 119)) {
                    return types[1];
                } else if (id >= 16 && id <= 23) {
                    return types[11];
                } else if (id >= 24 && id <= 31) {
                    return types[8];
                } else if (id >= 32 && id <= 39) {
                    return types[10];
                } else if (id >= 40 && id <= 47) {
                    return types[6];
                } else if (id >= 48 && id <= 55) {
                    return types[9];
                } else if (id >= 56 && id <= 71) {
                    return types[4];
                } else if (id >= 72 && id <= 79) {
                    return types[5];
                } else if (id >= 80 && id <= 95) {
                    return types[7];
                } else if ((id >= 96 && id <= 103) || (id >= 120 && id <= 127)) {
                    return types[3];
                } else {
                    return '';
                }
            }
        },
        
        propTypes: {
            id: React.PropTypes.number.isRequired,
            program: React.PropTypes.number.isRequired,
            sound: React.PropTypes.bool,
            notes: React.PropTypes.bool,
            
            switch: React.PropTypes.func
        },
        
        getDefaultProps: function () {
            return {
                sound: true,
                notes: true,
                
                switch: function () {}
            };
        },
        
        /**
         * Create a function to switch given parameter
         *
         * @param {param: string}   Parameter name
         */
        switcher: function (param) {
            return function (e) {
                this.props.switch(param);
                e.preventDefault();
            }.bind(this);
        },

        /**
         * Render channel
         */
        render: function () {
            var type, name, channel = App.components.Channel.Channel;
            
            if (this.props.id === 9) {
                type = channel.types[2];
                name = 'Percussions';
            } else {
                type = channel.getType(this.props.program);
                name = channel.programs[this.props.program];
            }
            
            return React.DOM.li({
                className: 'channel ' + type,
                'data-channel': this.props.id
            }, React.DOM.span(null, [
                name,
                React.DOM.button({
                    key: 'sound',
                    className: 'bt icon sound ' +
                        ((this.props.notes) ? 'on' : 'off'),
                    onClick: this.switcher('notes')
                }, 'Afficher/masquer'),
                React.DOM.button({
                    key: 'notes',
                    className: 'bt icon notes ' +
                        ((this.props.sound) ? 'on' : 'off'),
                    onClick: this.switcher('sound')
                }, 'Jouer/Ne pas jouer')
            ]));
        }
    });
}());