changeset 231:0249ee049353

Take single item as input and use progress-bar

--- a/src/app/analysis-item/analysis-item.component.html	Mon Apr 24 14:40:32 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.html	Mon Apr 24 16:20:23 2017 +0100
@@ -1,21 +1,21 @@
 <md-card>
   <md-card-header>
-    <md-card-title>{{title}}</md-card-title>
-    <md-card-subtitle>{{description}}</md-card-subtitle>
+    <md-card-title>{{item.title}}</md-card-title>
+    <md-card-subtitle>{{item.description}}</md-card-subtitle>
   </md-card-header>
   <md-card-content>
     <template [ngIf]="isLoading()">
-      <ugly-progress-spinner
+      <ugly-progress-bar
         [isDeterminate]="true"
-        [progress]="progress"
-      ></ugly-progress-spinner>
+        [progress]="item.progress"
+      ></ugly-progress-bar>
     </template>
     <template [ngIf]="!isLoading()">
       <app-waveform
         [timeline]="timeline"
-        [trackIdPrefix]=" id || title"
-        [isSubscribedToAudioService]="isActive && isRoot"
-        [isSubscribedToExtractionService]="isActive && !isRoot"
+        [trackIdPrefix]=" item.id || item.title"
+        [isSubscribedToAudioService]="isActive && item.isRoot"
+        [isSubscribedToExtractionService]="isActive && !item.isRoot"
         [isOneShotExtractor]="true"
         [isSeeking]="isActive"
       ></app-waveform>

--- a/src/app/analysis-item/analysis-item.component.ts	Mon Apr 24 14:40:32 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.ts	Mon Apr 24 16:20:23 2017 +0100
@@ -1,8 +1,12 @@
 /**
  * Created by lucast on 21/03/2017.
  */
-import {Component, Input, OnInit} from "@angular/core";
-import Waves from 'waves-ui';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit
+} from "@angular/core";
 
 export interface AnalysisItem {
   rootAudioUri: string;
@@ -18,24 +22,21 @@
 @Component({
   selector: 'ugly-analysis-item',
   templateUrl: './analysis-item.component.html',
-  styleUrls: ['./analysis-item.component.css']
+  styleUrls: ['./analysis-item.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AnalysisItemComponent implements OnInit {
 
   @Input() timeline: Timeline;
-  @Input() title: string;
-  @Input() description: string;
   @Input() isActive: boolean;
-  @Input() isRoot: boolean;
-  @Input() id: string;
-  @Input() progress: number;
+  @Input() item: AnalysisItem;
   private hasProgressOnInit = false;
 
   ngOnInit(): void {
-    this.hasProgressOnInit = this.progress != null;
+    this.hasProgressOnInit = this.item.progress != null;
   }
 
   isLoading(): boolean {
-    return this.hasProgressOnInit && this.progress < 100;
+    return this.hasProgressOnInit && this.item.progress < 100;
   }
 }