view src/app/app.component.html @ 193:ac57ddba8ba9

Provide an observable in the audio service for when new audio has been loaded. The handling of errors is currently undesirable, using optional fields on the returned object. I couldn't figure out the proper Observable error flow without closing the stream.

<div class="app-container">
  <div class="app-header">
    <md-toolbar color="primary">
      <md-icon svgIcon="duck"></md-icon>

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

      <app-playback-control></app-playback-control>
      <ugly-recording-control
        (finishedRecording)="onFileOpened($event)"
      ></ugly-recording-control>

      <!-- 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>
  </div>

  <div class="app-content">
    <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>
      <ugly-notebook-feed
        [audioBuffer]="audioBuffer"></ugly-notebook-feed>
      <ugly-progress-spinner [isVisible]="isProcessing"></ugly-progress-spinner>
    </md-sidenav-container>
  </div>

  <div class="app-footer">
    <md-toolbar color="primary">
      <md-icon svgIcon="duck"></md-icon>

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

      <app-playback-control></app-playback-control>
      <ugly-recording-control
        (finishedRecording)="onFileOpened($event)"
      ></ugly-recording-control>

      <!-- 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>

  </div>
</div>