make midi usage optional and fix some midi detection issues

philippotto · Oct 29, 2017 · e275160 · e275160
1 parent c7ee7f2
commit e275160
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 43 deletions.
diff --git a/app/scripts/AppFreezer.js b/app/scripts/AppFreezer.js
@@ -15,6 +15,7 @@ let defaultSettings = {
     },
     keySignature: [7, 7],
     useAccidentals: false,
+    tryToUseMidi: true,
     midi: {
       inputs: Freezer.createLeaf([]),
       activeInputIndex: 0,

diff --git a/app/scripts/services/bar_generator.js b/app/scripts/services/bar_generator.js
@@ -148,10 +148,7 @@ export default {
     return ["treble", "bass"].map(clef => _.random.apply(_, settings.chordSizeRanges[clef]));
   },
 
-  generateBars: function(settings, level) {
-    const isMidiAvailable = settings.midi.inputs.get().length > 0;
-    const onePerTime = !isMidiAvailable;
-
+  generateBars: function(settings, level, onePerTime) {
     const [trebleNotes, bassNotes] = _.unzip(
       _.range(0, options.chordsPerBar).map(() => {
         const generatePossibleNotes = clef => {

diff --git a/app/scripts/views/claviature_view.js b/app/scripts/views/claviature_view.js
@@ -114,9 +114,15 @@ export default class ClaviatureView extends Component {
       ["a#", "A# B♭", "black"],
       ["b", "B", "white"],
     ].map(args => this.renderKey.apply(this, args));
+
     return (
-      <div className={classNames({ "scale noSelect": true, noPointerEvents: this.props.disabled })}>
-        <ol>{keys}</ol>
+      <div>
+        <div
+          className={classNames({ "scale noSelect": true, noPointerEvents: this.props.disabled })}
+        >
+          <ol>{keys}</ol>
+        </div>
+        Click on the keys of the claviature or use your keyboard to hit notes!
       </div>
     );
   }

diff --git a/app/scripts/views/collapsable_container.js b/app/scripts/views/collapsable_container.js
@@ -28,7 +28,7 @@ export default class CollapsableContainer extends Component {
       }),
     ]).join(" ");
 
-    const maxHeight = this.props.maxHeight || 300;
+    const maxHeight = this.props.maxHeight || 500;
     const style = collapsed ? {} : { maxHeight };
     const children =
       collapsed && this.props.freeze && this.oldChildren ? this.oldChildren : this.props.children;

diff --git a/app/scripts/views/pitch_reading_view.js b/app/scripts/views/pitch_reading_view.js
@@ -37,8 +37,8 @@ export default class PitchReadingView extends Component {
     this.midiService = new MidiService({
       successCallback: this.onSuccess.bind(this),
       failureCallback: this.onFailure.bind(this),
-      errorCallback: this.onError.bind(this),
-      errorResolveCallback: this.onErrorResolve.bind(this),
+      errorCallback: this.onMidiError.bind(this),
+      errorResolveCallback: this.onMidiErrorResolve.bind(this),
     });
     this.startDate = new Date();
     this.midiService.setDesiredKeys(this.getAllCurrentKeys(), this.state.currentKeySignature);
@@ -106,7 +106,15 @@ export default class PitchReadingView extends Component {
   generateNewBars(settings) {
     const levelIndex = LevelService.getLevelOfUser(this.props.statisticService.getAllEvents()) + 1;
     const level = LevelService.getLevelByIndex(levelIndex);
-    return BarGenerator.generateBars(settings, settings.useAutomaticDifficulty ? level : null);
+
+    const { isMidiAvailable } = this.getMidiInfo();
+    const onePerTime = !isMidiAvailable;
+
+    return BarGenerator.generateBars(
+      settings,
+      settings.useAutomaticDifficulty ? level : null,
+      onePerTime,
+    );
   }
 
   generateNewBarState() {
@@ -120,7 +128,7 @@ export default class PitchReadingView extends Component {
   constructor(props, context) {
     super(props, context);
     this.state = {
-      errorMessage: null,
+      midiErrorMessage: null,
       running: false,
       ...this.generateNewBarState(),
     };
@@ -132,16 +140,30 @@ export default class PitchReadingView extends Component {
     this.startDate = new Date();
   }
 
+  getMidiInfo() {
+    const tryToUseMidi = this.props.settings.tryToUseMidi;
+    const isMidiAvailable = this.props.settings.midi.inputs.get().length > 0;
+    const useMidi = tryToUseMidi && isMidiAvailable;
+    const noMidiErrors = !this.state ? true : this.state.midiErrorMessage == null;
+
+    return {
+      tryToUseMidi,
+      isMidiAvailable,
+      useMidi,
+      noMidiErrors,
+    };
+  }
+
   render() {
     const claviatureContainerClasses = classNames({
       "content-box": true,
       "claviature-container": true,
     });
 
-    const isMidiAvailable = this.props.settings.midi.inputs.get().length > 0;
-    const noErrors = this.state.errorMessage !== null;
+    const { tryToUseMidi, isMidiAvailable, useMidi, noMidiErrors } = this.getMidiInfo();
+
     const miniClaviature =
-      isMidiAvailable && noErrors ? null : (
+      useMidi && noMidiErrors ? null : (
         <ClaviatureView
           desiredKeys={this.getAllCurrentKeys()}
           keySignature={this.state.currentKeySignature}
@@ -176,15 +198,15 @@ export default class PitchReadingView extends Component {
             welcomeText: true,
           })}
         >
-          <h3>Welcome to this pitch training!</h3>
+          <h3>Welcome to pitch training!</h3>
           <p>
             {"When you hit Start, notes will be displayed in the stave above. "}
-            {isMidiAvailable
+            {useMidi
               ? "Since we found a connected piano, you can use it to play the notes. "
               : "Just use the mini claviature below to play the notes. "}
             {"Don't worry about the rhythm or speed for now."}
           </p>
-          {isMidiAvailable ? null : midiSetUpText}
+          {tryToUseMidi && !isMidiAvailable ? midiSetUpText : null}
         </div>
       </CollapsableContainer>
     );
@@ -194,6 +216,8 @@ export default class PitchReadingView extends Component {
       bass: [],
     };
 
+    const hideMidiError = !tryToUseMidi || noMidiErrors;
+
     return (
       <div className={classNames({ trainer: true, trainerHidden1: !this.props.isActive })}>
         <div className="row center-lg center-md center-sm center-xs">
@@ -217,16 +241,16 @@ export default class PitchReadingView extends Component {
                   </div>
                 </div>
               </div>
-              <CollapsableContainer collapsed={!miniClaviature}>
+              <CollapsableContainer collapsed={!miniClaviature && hideMidiError}>
                 <div className={claviatureContainerClasses}>
                   {miniClaviature}
                   <div
                     className={classNames({
                       message: true,
-                      hide: this.state.errorMessage === null,
+                      hide: hideMidiError,
                     })}
                   >
-                    <h3>{this.state.errorMessage}</h3>
+                    <h3>{this.state.midiErrorMessage}</h3>
                   </div>
                 </div>
               </CollapsableContainer>
@@ -257,13 +281,13 @@ export default class PitchReadingView extends Component {
     this.midiService.setDesiredKeys(this.getAllCurrentKeys(), this.state.currentKeySignature);
   }
 
-  onError(msg) {
+  onMidiError(msg) {
     console.error.apply(console, arguments);
-    this.setState({ errorMessage: msg });
+    this.setState({ midiErrorMessage: msg });
   }
 
-  onErrorResolve() {
-    this.setState({ errorMessage: null });
+  onMidiErrorResolve() {
+    this.setState({ midiErrorMessage: null });
   }
 
   getAllCurrentKeys() {

diff --git a/app/scripts/views/pitch_settings_view.js b/app/scripts/views/pitch_settings_view.js
@@ -57,25 +57,39 @@ export default class PitchSettingsView extends Component {
     const midiSettings = this.props.settings.midi;
     const midiInputs = midiSettings.inputs.get();
     const isMidiAvailable = midiInputs.length > 0;
+    const tryToUseMidi = this.props.settings.tryToUseMidi;
     const deviceSelector = !isMidiAvailable ? null : (
-      <SettingLine label="Midi device">
-        <select
-          name="select"
-          onChange={this.onMidiSelectChange.bind(this)}
-          defaultValue={midiSettings.currentInput}
-          ref={c => {
-            this.midiSelect = c;
-          }}
-        >
-          {midiInputs.map((el, index) => {
-            return (
-              <option value={index} key={index}>
-                Device {index + 1}
-              </option>
-            );
-          })}
-        </select>
-      </SettingLine>
+      <div>
+        <SettingLine className="setting_checkbox" label="Use Midi:">
+          <input
+            type="checkbox"
+            checked={tryToUseMidi}
+            id="try_to_use_midi_checkbox"
+            name="check"
+            onChange={this.buildCheckboxStateChanger("tryToUseMidi")}
+          />
+          <label htmlFor="try_to_use_midi_checkbox" />
+        </SettingLine>
+        <SettingLine label="Midi device">
+          <select
+            name="select"
+            onChange={this.onMidiSelectChange.bind(this)}
+            defaultValue={midiSettings.currentInput}
+            ref={c => {
+              this.midiSelect = c;
+            }}
+            disabled={!tryToUseMidi}
+          >
+            {midiInputs.map((el, index) => {
+              return (
+                <option value={index} key={index}>
+                  Device {index + 1}
+                </option>
+              );
+            })}
+          </select>
+        </SettingLine>
+      </div>
     );
 
     const useAutomaticDifficulty = this.props.settings.useAutomaticDifficulty;

diff --git a/app/scripts/views/rhythm_reading_view.js b/app/scripts/views/rhythm_reading_view.js
@@ -214,7 +214,7 @@ export default class RhythmReadingView extends Component {
   render() {
     const welcomeText = (
       <CollapsableContainer collapsed={this.state.phase !== Phases.welcome}>
-        <h3>Welcome to this rhythm training!</h3>
+        <h3>Welcome to rhythm training!</h3>
         <p>
           When you start the training, we will count in for 4 beats and afterwards you can tap the
           given rhythm (either use your &lsquo;space&rsquo; button or your touchscreen). Make sure