view src/app/app.component.html @ 115:c02c76b94148

Basic spinner for indicating loading of files and features - the flag used for tracking state is mostly redundant (it is usually !canExtract... apart from initial state)... but going with this for now.

<md-toolbar color="primary">
  <md-icon svgIcon="duck"></md-icon>

  <span class="app-toolbar-filler"></span>

  <app-playback-control></app-playback-control>
  <button md-icon-button>
    <md-icon>mic_off</md-icon>
  </button>

  <!-- This fills the remaining space of the current row -->
  <span class="app-toolbar-filler"></span>


  <app-audio-file-open (fileOpened)="onFileOpened($event)"></app-audio-file-open>
  <!-- menu opens when trigger button is clicked -->
  <button md-icon-button (click)="sidenav.toggle()">
    <md-icon>extension</md-icon>
  </button>
</md-toolbar>

<md-sidenav-container>
  <md-sidenav #sidenav align="start" mode="over">
    <app-feature-extraction-menu
      (requestOutput)="extractFeatures($event)"
      [disabled]="!canExtract">
    </app-feature-extraction-menu>
  </md-sidenav>
  <app-waveform
    [audioBuffer]="audioBuffer"
    ></app-waveform>
  <ugly-progress-spinner [isVisible]="isProcessing"></ugly-progress-spinner>
</md-sidenav-container>