annotate src/app/app.component.html @ 21:d9c0a1ca005c

Prototype some playback controls, and tabbed menus in the sidebar.

<md-toolbar color="primary">
  <md-icon svgSrc="assets/duck.svg"></md-icon>
  <!-- This fills the remaining space of the current row -->
  <span class="app-toolbar-filler"></span>


  <app-audio-file-open (audioLoaded)="onAudioLoaded($event)"></app-audio-file-open>
  <!-- menu opens when trigger button is clicked -->
  <button md-icon-button [md-menu-trigger-for]="menu">
    <md-icon>more_vert</md-icon>
  </button>
  <md-menu x-position="before" #menu="mdMenu">
    <button md-menu-item> Settings</button>
    <button md-menu-item> Help</button>
  </md-menu>
</md-toolbar>

<md-sidenav-layout>
  <md-sidenav align="end" mode="side" opened>
    <md-tab-group>
      <md-tab>
        <template md-tab-label>
          Playback
        </template>
        <template md-tab-content>
          <app-playback-control class="playback-content"></app-playback-control>
          <button md-icon-button (click)="testRef()">
            <md-icon>face</md-icon>
          </button>
          <h1>{{count}}</h1>
        </template>
      </md-tab>
      <md-tab>
        <template md-tab-label>
          Feature Extraction
        </template>
        <template md-tab-content>
          <p>Extraction</p>
        </template>
      </md-tab>
    </md-tab-group>
  </md-sidenav>
  <app-waveform [audioBuffer]="audioBuffer"></app-waveform>
</md-sidenav-layout>