Mercurial > hg > ugly-duckling
comparison src/app/notebook-feed/notebook-feed.component.ts @ 464:50f61d1945db
Hook up some buttons for navigating history (undo / redo). Some refactoring to allow for the audio player to get updated as a consequence of a state change (the audio related to the current top of the stack is used).
author | Lucas Thompson <dev@lucas.im> |
---|---|
date | Fri, 30 Jun 2017 14:01:22 +0100 |
parents | ccce2c09502e |
children | 3a76205e06b6 |
comparison
equal
deleted
inserted
replaced
463:c9c6b01e9b4f | 464:50f61d1945db |
---|---|
17 } from '../analysis-item/AnalysisItem'; | 17 } from '../analysis-item/AnalysisItem'; |
18 import {Observable} from 'rxjs/Observable'; | 18 import {Observable} from 'rxjs/Observable'; |
19 import {Dimension} from '../app.module'; | 19 import {Dimension} from '../app.module'; |
20 import {Subscription} from 'rxjs/Subscription'; | 20 import {Subscription} from 'rxjs/Subscription'; |
21 import {OnSeekHandler} from '../playhead/PlayHeadHelpers'; | 21 import {OnSeekHandler} from '../playhead/PlayHeadHelpers'; |
22 import {AudioPlayerService} from '../services/audio-player/audio-player.service'; | |
22 | 23 |
23 @Component({ | 24 @Component({ |
24 selector: 'ugly-notebook-feed', | 25 selector: 'ugly-notebook-feed', |
25 templateUrl: './notebook-feed.component.html', | 26 templateUrl: './notebook-feed.component.html', |
26 styleUrls: ['./notebook-feed.component.css'], | 27 styleUrls: ['./notebook-feed.component.css'], |
27 changeDetection: ChangeDetectionStrategy.OnPush | 28 changeDetection: ChangeDetectionStrategy.OnPush |
28 }) | 29 }) |
29 export class NotebookFeedComponent implements OnDestroy { | 30 export class NotebookFeedComponent implements OnDestroy { |
30 @Input() analyses: Item[]; | 31 @Input() set analyses(analyses: Item[]) { |
31 @Input() set rootAudioUri(uri: string) { | 32 const front = analyses[0]; |
32 this._rootAudioUri = uri; | 33 if (analyses !== this.mAnalyses) { |
34 if (front && getRootUri(front) !== this.currentAudioUri) { | |
35 this.audioService.unload(); | |
36 this.audioService.loadAudioFromUri(getRootUri(front)); | |
37 } | |
38 } | |
39 this.mAnalyses = analyses; | |
40 if (front) { | |
41 this.currentAudioUri = this.getCurrentAudioUri(); | |
42 } | |
33 } | 43 } |
44 | |
45 get analyses(): Item[] { | |
46 return this.mAnalyses; | |
47 } | |
48 | |
34 @Input() onSeek: OnSeekHandler; | 49 @Input() onSeek: OnSeekHandler; |
35 @Output() removeItem: EventEmitter<Item>; | 50 @Output() removeItem: EventEmitter<Item>; |
36 | 51 |
37 get rootAudioUri(): string { | |
38 return this._rootAudioUri; | |
39 } | |
40 private _rootAudioUri: string; | |
41 private resizeSubscription: Subscription; | 52 private resizeSubscription: Subscription; |
42 private width: number; | 53 private width: number; |
43 private lastWidth: number; | 54 private lastWidth: number; |
44 private timelines: Map<string, Timeline>; | 55 private timelines: Map<string, Timeline>; |
56 private mAnalyses: Item[]; | |
57 private currentAudioUri: string; | |
45 | 58 |
46 constructor( | 59 constructor( |
47 private ref: ChangeDetectorRef, | 60 private ref: ChangeDetectorRef, |
48 @Inject('DimensionObservable') private onResize: Observable<Dimension> | 61 @Inject('DimensionObservable') private onResize: Observable<Dimension>, |
62 private audioService: AudioPlayerService | |
49 ) { | 63 ) { |
50 this.removeItem = new EventEmitter<Item>(); | 64 this.removeItem = new EventEmitter<Item>(); |
51 this.timelines = new Map(); | 65 this.timelines = new Map(); |
52 this.onResize.subscribe(dim => { | 66 this.onResize.subscribe(dim => { |
53 this.lastWidth = this.width; | 67 this.lastWidth = this.width; |
84 isAudioItem(item: Item): boolean { | 98 isAudioItem(item: Item): boolean { |
85 return isLoadedRootAudioItem(item); | 99 return isLoadedRootAudioItem(item); |
86 } | 100 } |
87 | 101 |
88 isActiveItem(item: Item): boolean { | 102 isActiveItem(item: Item): boolean { |
89 return this.rootAudioUri === getRootUri(item); | 103 return this.getCurrentAudioUri() === getRootUri(item); |
90 } | 104 } |
91 | 105 |
92 getOnSeekForItem(item: Item): (timeSeconds: number) => any { | 106 getOnSeekForItem(item: Item): (timeSeconds: number) => any { |
93 return this.isActiveItem(item) ? this.onSeek : () => {}; | 107 return this.isActiveItem(item) ? this.onSeek : () => {}; |
94 } | 108 } |
96 ngOnDestroy(): void { | 110 ngOnDestroy(): void { |
97 if (this.resizeSubscription) { | 111 if (this.resizeSubscription) { |
98 this.resizeSubscription.unsubscribe(); | 112 this.resizeSubscription.unsubscribe(); |
99 } | 113 } |
100 } | 114 } |
115 | |
116 private getCurrentAudioUri(): string { | |
117 if (this.analyses.length === 0) { | |
118 return ''; | |
119 } | |
120 try { | |
121 return getRootUri(this.analyses[0]); | |
122 } catch (e) { | |
123 return ''; | |
124 } | |
125 } | |
101 } | 126 } |