synthesizer.component.html

<div class="synthesizer" *ngIf="synthesizer">
  <div class="synthesizer-main">
    <div class="inside">
      <div class="synthesizer-main-section">
        <div class="synthesizer-oscs">
          <div *ngFor="let osc of synthesizer.oscs; let i = index"
               class="synthesizer-osc"
               (click)="selectOsc(osc)"
               [ngClass]="{selected:(currentOsc === osc)}"
          >
            <app-osc [synthesizer]="synthesizer" [osc]="osc"></app-osc>
          </div>
        </div>
      </div>
      <div class="synthesizer-nodes-section vertical">
        <div class="synthesizer-nodes-navigation">
          <button *ngFor="let tab of nodesTabs" (click)="nodesTab = tab" [ngClass]="{active:(nodesTab === tab)}">
            {{tab}}
          </button>
        </div>
        <div class="synthesizer-lfos" *ngIf="nodesTab === 'LFO'">
          <div *ngFor="let lfo of synthesizer.lfos; let i = index"
               class="synthesizer-lfo"
               (click)="selectLfo(lfo)"
               [ngClass]="{selected:(currentLfo === lfo)}"
          >
            <app-lfo [lfo]="lfo"></app-lfo>
          </div>
          <button class="btn-new synthesizer-new-lfo" (click)="synthesizer.addLfo()">+</button>
        </div>
        <div class="synthesizer-sequencers" *ngIf="nodesTab === 'Sequencer'">
          <div *ngFor="let sequencer of synthesizer.sequencers; let i = index"
               class="synthesizer-sequencer"
               (click)="selectSequencer(sequencer)"
               [ngClass]="{selected:(currentSequencer === sequencer)}"
          >
            <app-sequencer [sequencer]="sequencer"></app-sequencer>
          </div>
          <button class="btn-new synthesizer-new-sequencer" (click)="synthesizer.addSequencer()">+</button>
        </div>
      </div>
    </div>
  </div>
  <app-synthesizer-display *ngIf="showDisplay" [synthesizer]="synthesizer"></app-synthesizer-display>
  <div class="synthesizer-options">
    <div class="synthesizer-settings">
      <div class="synthesizer-settings-values">
        <label>
          <span>Tempo</span>
          <input type="number" [(ngModel)]="synthesizer.currentTempo" (change)="synthesizer.tempo()"/>
        </label>
        <label class="synthesizer-settings-volume">
          <span>Volume</span>
          <mat-slider min="0" max="1" step=".01"
                      [(ngModel)]="synthesizer.volume"></mat-slider>

        </label>
        <label>
          <div class="checkbox" [ngClass]="{active:(!synthesizer.restartOnTrigger)}"
               (click)="synthesizer.setRestart(!synthesizer.restartOnTrigger)">
            <div class="checkbox-icon" *ngIf="synthesizer.restartOnTrigger">⇒</div>
            <div class="checkbox-icon" *ngIf="!synthesizer.restartOnTrigger">⟲</div>
          </div>

        </label>
        <div *ngIf="!synthesizer.restartOnTrigger" class="synthesizer-player">
          <button *ngIf="synthesizer.paused" (click)="synthesizer.play();">▶</button>
          <button *ngIf="!synthesizer.paused" (click)="synthesizer.pause();">⯀</button>
          <button *ngIf="!synthesizer.restartOnTrigger" (click)="synthesizer.restart()">↫</button>
          <label *ngIf="!synthesizer.restartOnTrigger">
            <div class="checkbox" [ngClass]="{active:(synthesizer.metronome)}"
                 (click)="synthesizer.metronome = !synthesizer.metronome">
              <div class="checkbox-icon">M</div>
            </div>
          </label>
        </div>
      </div>
      <div class="synthesizer-menu-buttons">
        <button class="synthesizer-settings-save" (click)="showDisplay = !showDisplay"
                [ngClass]="{active:(showDisplay)}">
          <span *ngIf="!showDisplay">ⓘ ⯅</span>
          <span *ngIf="showDisplay">ⓘ ▼ </span>
        </button>
        <button class="synthesizer-settings-save" (click)="showKeyboard = !showKeyboard"
                [ngClass]="{active:(showKeyboard)}">
          <span *ngIf="!showKeyboard"> 🎹 ⯅</span>
          <span *ngIf="showKeyboard">🎹 ▼ </span>
        </button>
        <button
          *ngIf="synthesizer.midi && (synthesizer.midi.inputControllers.length || synthesizer.midi.outputControllers.length)"
          class="synthesizer-settings-save" (click)="showMidiControls = !showMidiControls"
          [ngClass]="{active:(showMidiControls)}">
          <span>MIDI</span>
          <span *ngIf="!showMidiControls"> ⯅</span>
          <span *ngIf="showMidiControls"> ▼</span>
        </button>
      </div>
      <div class="synthesizer-option-buttons">
        <button class="synthesizer-settings-reset" (click)="synthesizer.reset()">♺</button>
        <button class="synthesizer-settings-save" (click)="synthesizer.save()">💾</button>
      </div>
    </div>
    <app-midi-controls *ngIf="showMidiControls" [synthesizer]="synthesizer"></app-midi-controls>
  </div>
  <div class="synthesizer-keyboard" *ngIf="showKeyboard">
    <app-piano-keys [synthesizer]="synthesizer" [currentNote]="synthesizer.currentNote"
                    [currentOctave]="synthesizer.currentOctave"
                    [octaves]="octaves" (onKeyDown)="pianoKeyDown($event)" (onKeyUp)="pianoKeyUp($event)"
                    (onPitchChange)="setPitch($event)"></app-piano-keys>
  </div>
</div>