view src/app/analysis-item/analysis-item.component.html @ 509:041468f553e1 tip master

Merge pull request #57 from LucasThompson/fix/session-stack-max-call-stack

Fix accidental recursion in PersistentStack

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


        <ugly-waves-play-head
          #notAudio
          *ngIf="getFeatureShape() as shape"
          [ngSwitch]="shape"
          [colour]="'#c33c54'"
          [isActive]="isActive"
        >
          <ugly-cross-hair-inspector
            *ngSwitchCase="'vector'"
            [unit]="item.unit"
            [isAnimated]="isActive"
          >
            <ugly-curve
              [colour]="getNextColour()"
              [timeline]="timeline"
              [width]="contentWidth"
              [onSeek]="onSeek"
              [curve]="item.collected"
              [duration]="getDuration()"
            ></ugly-curve>
          </ugly-cross-hair-inspector>
          <ugly-cross-hair-inspector
            *ngSwitchCase="'tracks'"
            [unit]="item.unit"
            [isAnimated]="isActive"
          >
            <ugly-tracks
              [colour]="getNextColour()"
              [timeline]="timeline"
              [width]="contentWidth"
              [onSeek]="onSeek"
              [tracks]="item.collected"
              [duration]="getDuration()"
            ></ugly-tracks>
          </ugly-cross-hair-inspector>
          <ugly-cross-hair-inspector
            *ngSwitchCase="'notes'"
            [unit]="item.unit"
            [isAnimated]="isActive"
          >
            <ugly-notes
              [colour]="getNextColour()"
              [timeline]="timeline"
              [width]="contentWidth"
              [onSeek]="onSeek"
              [notes]="item.collected"
              [duration]="getDuration()"
            ></ugly-notes>
          </ugly-cross-hair-inspector>
          <ugly-cross-hair-inspector
            *ngSwitchCase="'regions'"
            [unit]="item.unit"
            [isAnimated]="isActive"
          >
            <ugly-regions
              [colour]="getNextColour()"
              [timeline]="timeline"
              [width]="contentWidth"
              [onSeek]="onSeek"
              [regions]="item.collected"
              [duration]="getDuration()"
            ></ugly-regions>
          </ugly-cross-hair-inspector>
          <ugly-vertical-scale
            *ngSwitchCase="'matrix'"
          >
            <ugly-grid
              [colour]="getNextColour()"
              [timeline]="timeline"
              [width]="contentWidth"
              [onSeek]="onSeek"
              [grid]="item.collected"
              [duration]="getDuration()"
            ></ugly-grid>
          </ugly-vertical-scale>
          <ugly-instants
            *ngSwitchCase="'instants'"
            [colour]="getNextColour()"
            [timeline]="timeline"
            [width]="contentWidth"
            [onSeek]="onSeek"
            [instants]="item.collected"
            [duration]="getDuration()"
          ></ugly-instants>

          <div *ngSwitchDefault>Feature cannot be visualised.</div>
        </ugly-waves-play-head>
      </ng-template>
    </div>
  </mat-card-content>
  <mat-card-actions
    *ngIf="isAudioItem()">
    <a mat-icon-button
       *ngIf="isAudioItem() && item.isExportable"
      [href]="sanitize(item.uri)"
      [download]="generateFilename(item)"
    ><mat-icon>file_download</mat-icon></a>
    <button mat-icon-button (click)="remove.emit(item)">
      <mat-icon>delete_forever</mat-icon>
    </button>
  </mat-card-actions>
</mat-card>