annotate src/app/analysis-item/analysis-item.component.html @ 394:f45a916eb5b1

Use the cross hair layer for notes, tracks and curve. This involved bodging in unit to ShapedFeatureData, which isn't particularly easy to do because this isn't an encapsulated type. Need to come back to improving this, as I am monkey-patching a unit property onto Arrays etc.

<md-card>
  <md-card-header>
    <md-card-title>{{item.title}}</md-card-title>
    <md-card-subtitle>{{item.description}}</md-card-subtitle>
  </md-card-header>
  <md-card-content>
    <ng-template [ngIf]="isLoading()">
      <ugly-progress-bar
        [isDeterminate]="true"
        [progress]="item.progress"
      ></ugly-progress-bar>
    </ng-template>
    <div class="content">
      <ng-template [ngIf]="!isLoading()">
        <ng-template [ngIf]="isActive && isAudioItem()">
          <ugly-live-play-head
            [timeToPixel]="DOES_NOT_BELONG_HERE"
            [colour]="'#c33c54'"
          >
          </ugly-live-play-head>
        </ng-template>
        <ugly-waveform
          *ngIf="isAudioItem(); else notAudio"
          [timeline]="timeline"
          [width]="contentWidth"
          [audioBuffer]="item.audioData"
          [onSeek]="onSeek"
          [colour]="'#0868ac'"
        ></ugly-waveform>

        <ng-template #notAudio>
          <div class="content"
            *ngIf="getFeatureShape() as shape; else showSpinner">
            <div [ngSwitch]="shape" class="content">
              <ugly-curve
                *ngSwitchCase="'vector'"
                [colour]="getNextColour()"
                [timeline]="timeline"
                [width]="contentWidth"
                [onSeek]="onSeek"
                [curve]="item.collected"
              ></ugly-curve>
              <ugly-cross-hair-inspector *ngSwitchCase="'tracks'">
                <ugly-tracks
                  [colour]="getNextColour()"
                  [timeline]="timeline"
                  [width]="contentWidth"
                  [onSeek]="onSeek"
                  [tracks]="item.collected"
                ></ugly-tracks>
              </ugly-cross-hair-inspector>
              <ugly-cross-hair-inspector *ngSwitchCase="'notes'">
                <ugly-notes
                  [colour]="getNextColour()"
                  [timeline]="timeline"
                  [width]="contentWidth"
                  [onSeek]="onSeek"
                  [notes]="item.collected"
                ></ugly-notes>
              </ugly-cross-hair-inspector>
              <ugly-instants
                *ngSwitchCase="'instants'"
                [colour]="getNextColour()"
                [timeline]="timeline"
                [width]="contentWidth"
                [onSeek]="onSeek"
                [instants]="item.collected"
              ></ugly-instants>
              <ugly-grid
                *ngSwitchCase="'matrix'"
                [timeline]="timeline"
                [width]="contentWidth"
                [onSeek]="onSeek"
                [grid]="item.collected"
              ></ugly-grid>

              <div *ngSwitchDefault>Feature cannot be visualised.</div>
            </div>
          </div>
          <ng-template #showSpinner>
            <ugly-progress-spinner></ugly-progress-spinner>
          </ng-template>
        </ng-template>

      </ng-template>
    </div>
  </md-card-content>
</md-card>