synthing

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

index.js (2143B)

      1 import { h } from 'preact';
      2 import { connect } from 'preact-redux';
      3 import ClickOutside from '../ClickOutside/';
      4 import './Help.css';
      5 import keymapping from '../../AudioKeys/images/audiokeys-mapping-rows1.jpg';
      6 
      7 const setHelpOpen = (value) => ({type: 'SET_HELP_OPEN', value});
      8 
      9 export default connect(state => ({open: state.helpOpen}), {setHelpOpen})((props) => {
     10     const closeIfOpen = () => {
     11         if (props.open)
     12             props.setHelpOpen(false);
     13     }
     14     const modal = props.open ? (
     15             <div class="help-modal">
     16                 <ClickOutside action={closeIfOpen}>
     17                     <div class="help-container">
     18                         <h1>Help</h1>
     19                         <h2>Keybindings</h2>
     20                         <p>Credit to AudioKeys for the image below. Velocity does nothing:</p>
     21                         <a href={keymapping} target="_blank">
     22                             <img class="keyboard" src={keymapping} />
     23                             (Click to view full-size)
     24                         </a>
     25                         <p>
     26                             Additionally, pressing '?' will open/close this window.
     27                         </p>
     28                         <h2>About</h2>
     29                         Synthing allows you to experiment with and visualize a waveform's effect on generated sound. Works best in Chrome.
     30                         <h2>Overview</h2>
     31                         <ul>
     32                             <li>Draw on the waveform to alter it.</li>
     33                             <li>Use the sequencer to activate different waveforms at different times. You can mute, solo, and mix waveforms.</li>
     34                             <li>Press play to start the sequencer, and feel free to change the bpm to make it faster or slower.</li>
     35                         </ul>
     36                     </div>
     37                 </ClickOutside>
     38             </div>
     39     ) : '';
     40 
     41     return (
     42         <div class="help">
     43             <div
     44                 class="help-tag"
     45                 onClick={props.setHelpOpen.bind(null, !props.open)}
     46             >
     47                 ?
     48             </div>
     49             {modal}
     50         </div>
     51     );
     52 })