|
dev@170
|
1 <md-card>
|
|
dev@170
|
2 <md-card-header>
|
|
dev@231
|
3 <md-card-title>{{item.title}}</md-card-title>
|
|
dev@231
|
4 <md-card-subtitle>{{item.description}}</md-card-subtitle>
|
|
dev@170
|
5 </md-card-header>
|
|
dev@170
|
6 <md-card-content>
|
|
dev@348
|
7 <div class="content">
|
|
dev@409
|
8 <ng-template [ngIf]="isLoading()">
|
|
dev@409
|
9 <ugly-progress-bar
|
|
dev@409
|
10 [isDeterminate]="true"
|
|
dev@409
|
11 [progress]="item.progress"
|
|
dev@409
|
12 ></ugly-progress-bar>
|
|
dev@409
|
13 </ng-template>
|
|
dev@348
|
14 <ng-template [ngIf]="!isLoading()">
|
|
dev@410
|
15 <ugly-progress-spinner *ngIf="isPending()"></ugly-progress-spinner>
|
|
dev@409
|
16 <ugly-waves-play-head
|
|
dev@409
|
17 [colour]="'#c33c54'"
|
|
dev@409
|
18 [isActive]="isActive"
|
|
dev@409
|
19 >
|
|
dev@409
|
20 <ugly-waveform
|
|
dev@409
|
21 *ngIf="isAudioItem(); else notAudio"
|
|
dev@409
|
22 [timeline]="timeline"
|
|
dev@409
|
23 [width]="contentWidth"
|
|
dev@409
|
24 [audioBuffer]="item.audioData"
|
|
dev@409
|
25 [onSeek]="onSeek"
|
|
dev@409
|
26 [colour]="'#0868ac'"
|
|
dev@412
|
27 [duration]="getDuration()"
|
|
dev@409
|
28 ></ugly-waveform>
|
|
dev@409
|
29 </ugly-waves-play-head>
|
|
dev@409
|
30
|
|
dev@409
|
31
|
|
dev@409
|
32 <ugly-waves-play-head
|
|
dev@409
|
33 #notAudio
|
|
dev@409
|
34 *ngIf="getFeatureShape() as shape"
|
|
dev@409
|
35 [ngSwitch]="shape"
|
|
dev@409
|
36 [colour]="'#c33c54'"
|
|
dev@409
|
37 [isActive]="isActive"
|
|
dev@409
|
38 >
|
|
dev@409
|
39 <ugly-cross-hair-inspector
|
|
dev@409
|
40 *ngSwitchCase="'vector'"
|
|
dev@409
|
41 [unit]="item.unit"
|
|
dev@409
|
42 [isAnimated]="isActive"
|
|
dev@348
|
43 >
|
|
dev@409
|
44 <ugly-curve
|
|
dev@409
|
45 [colour]="getNextColour()"
|
|
dev@409
|
46 [timeline]="timeline"
|
|
dev@409
|
47 [width]="contentWidth"
|
|
dev@409
|
48 [onSeek]="onSeek"
|
|
dev@409
|
49 [curve]="item.collected"
|
|
dev@412
|
50 [duration]="getDuration()"
|
|
dev@409
|
51 ></ugly-curve>
|
|
dev@409
|
52 </ugly-cross-hair-inspector>
|
|
dev@409
|
53 <ugly-cross-hair-inspector
|
|
dev@409
|
54 *ngSwitchCase="'tracks'"
|
|
dev@409
|
55 [unit]="item.unit"
|
|
dev@409
|
56 [isAnimated]="isActive"
|
|
dev@409
|
57 >
|
|
dev@409
|
58 <ugly-tracks
|
|
dev@409
|
59 [colour]="getNextColour()"
|
|
dev@409
|
60 [timeline]="timeline"
|
|
dev@409
|
61 [width]="contentWidth"
|
|
dev@409
|
62 [onSeek]="onSeek"
|
|
dev@409
|
63 [tracks]="item.collected"
|
|
dev@412
|
64 [duration]="getDuration()"
|
|
dev@409
|
65 ></ugly-tracks>
|
|
dev@409
|
66 </ugly-cross-hair-inspector>
|
|
dev@409
|
67 <ugly-cross-hair-inspector
|
|
dev@409
|
68 *ngSwitchCase="'notes'"
|
|
dev@409
|
69 [unit]="item.unit"
|
|
dev@409
|
70 [isAnimated]="isActive"
|
|
dev@409
|
71 >
|
|
dev@409
|
72 <ugly-notes
|
|
dev@409
|
73 [colour]="getNextColour()"
|
|
dev@409
|
74 [timeline]="timeline"
|
|
dev@409
|
75 [width]="contentWidth"
|
|
dev@409
|
76 [onSeek]="onSeek"
|
|
dev@409
|
77 [notes]="item.collected"
|
|
dev@412
|
78 [duration]="getDuration()"
|
|
dev@409
|
79 ></ugly-notes>
|
|
dev@409
|
80 </ugly-cross-hair-inspector>
|
|
dev@409
|
81 <ugly-instants
|
|
dev@409
|
82 *ngSwitchCase="'instants'"
|
|
dev@409
|
83 [colour]="getNextColour()"
|
|
dev@409
|
84 [timeline]="timeline"
|
|
dev@409
|
85 [width]="contentWidth"
|
|
dev@409
|
86 [onSeek]="onSeek"
|
|
dev@409
|
87 [instants]="item.collected"
|
|
dev@412
|
88 [duration]="getDuration()"
|
|
dev@409
|
89 ></ugly-instants>
|
|
dev@409
|
90 <ugly-grid
|
|
dev@409
|
91 *ngSwitchCase="'matrix'"
|
|
dev@409
|
92 [timeline]="timeline"
|
|
dev@409
|
93 [width]="contentWidth"
|
|
dev@409
|
94 [onSeek]="onSeek"
|
|
dev@409
|
95 [grid]="item.collected"
|
|
dev@412
|
96 [duration]="getDuration()"
|
|
dev@409
|
97 ></ugly-grid>
|
|
dev@363
|
98
|
|
dev@409
|
99 <div *ngSwitchDefault>Feature cannot be visualised.</div>
|
|
dev@409
|
100 </ugly-waves-play-head>
|
|
dev@348
|
101 </ng-template>
|
|
dev@348
|
102 </div>
|
|
dev@170
|
103 </md-card-content>
|
|
dev@170
|
104 </md-card>
|
