synthing

a waveform sequencing synth on the web
Log | Files | Refs | Submodules

index.js (2892B)

      1 import { h, Component } from 'preact';
      2 import CheckBox from '../CheckBox/';
      3 import WaveTable from '../WaveTable/';
      4 import HSlider from '../HSlider/';
      5 import helpers from '../helpers';
      6 import './style.css';
      7 
      8 export default class WaveManager extends Component {
      9     render() {
     10         const modeClass = this.props.activated ? ' selected' : '';
     11         return (
     12             <div class={`wave-manager${modeClass}`}>
     13                 <div class="buttons">
     14                     <div class="left-button-group">
     15                         <div>
     16                             <button
     17                                 class="item"
     18                                 onClick={this.props.remove}
     19                             >
     20                                 <span class="icon icons-ex"></span>
     21                             </button>
     22                             <button
     23                                 class="item"
     24                                 onClick={this.props.duplicate}
     25                             >
     26                                 <span class="icon icons-dupe"></span>
     27                             </button>
     28                         </div>
     29                     </div>
     30                     <div class="right-button-group">
     31                         <button
     32                             class={`item solo${this.props.tone.solo ? ' active' : ''}`}
     33                             onClick={this.props.toggleSolo}
     34                         >
     35                             solo
     36                         </button>
     37                         <button
     38                             class={`item mute${this.props.tone.mute ? ' active' : ''}`}
     39                             onClick={this.props.toggleMute}
     40                         >
     41                             mute
     42                         </button>
     43                         <HSlider
     44                             value ={this.props.mix}
     45                             update={this.props.updateMix}
     46                             class="item"
     47                         >
     48                             <span>mix</span>
     49                         </HSlider>
     50                     </div>
     51                 </div>
     52                 <div class="beats">
     53                     <div onClick={this.props.activate}>
     54                         <WaveTable
     55                             height={40}
     56                             width={75}
     57                             waveform={this.props.tone.waveform.slice()}
     58                         />
     59                     </div>
     60                     {this.props.tone.beats.slice(0, this.props.numBeats).map((val, idx) => {
     61                          return (
     62                              <CheckBox
     63                                  class={this.props.beat === idx ? 'beat' : ''}
     64                                  checked={val}
     65                                  update={helpers.partial(this.props.updateBeat, idx)} />
     66                          )})}
     67                 </div>
     68             </div>
     69         );
     70     }
     71 }