262 lines
8.4 KiB
JavaScript
262 lines
8.4 KiB
JavaScript
/*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')
|
|
]));
|
|
}
|
|
});
|
|
}()); |