Mercurial > hg > ugly-duckling
changeset 133:4452f4b9f9a8
Component for a button controlling the recording service.
author | Lucas Thompson <dev@lucas.im> |
---|---|
date | Mon, 20 Mar 2017 13:25:22 +0000 |
parents | 36f57a21637c |
children | 976087b98e72 |
files | src/app/recording-control/recording-control.component.html src/app/recording-control/recording-control.component.ts |
diffstat | 2 files changed, 62 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/app/recording-control/recording-control.component.html Mon Mar 20 13:25:22 2017 +0000 @@ -0,0 +1,8 @@ +<button md-icon-button (click)="emitToggleRecording()"> + <md-icon> + <template [ngIf]="recordingStatus == 'enabled'">mic_none</template> + <template [ngIf]="recordingStatus == 'disabled'">mic_off</template> + <template [ngIf]="recordingStatus == 'recording'">mic_on</template> + </md-icon> +</button> +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/app/recording-control/recording-control.component.ts Mon Mar 20 13:25:22 2017 +0000 @@ -0,0 +1,54 @@ +/** + * Created by lucas on 17/03/2017. + */ + +import { + Component, + OnInit, + OnDestroy, + Output, + EventEmitter +} from "@angular/core"; +import { + AudioRecorderService, + RecorderServiceStatus +} from "../services/audio-recorder/audio-recorder.service"; +import {Subscription} from "rxjs"; + +@Component({ + selector: 'ugly-recording-control', + templateUrl: './recording-control.component.html' +}) +export class RecordingControlComponent implements OnInit, OnDestroy { + private recordingState: Subscription; + private newRecording: Subscription; + recordingStatus: RecorderServiceStatus; + @Output() finishedRecording: EventEmitter<Blob>; + + constructor(private recordingService: AudioRecorderService) { + this.recordingStatus = "disabled"; + this.finishedRecording = new EventEmitter<Blob>(); + } + + ngOnInit(): void { + this.recordingState = this.recordingService.recordingStateChange$.subscribe( + (status: RecorderServiceStatus) => { + this.recordingStatus = status; + } + ); + this.newRecording = this.recordingService.newRecording$.subscribe( + (recordingBlob: Blob) => { + this.finishedRecording.emit(recordingBlob); + } + ); + } + + ngOnDestroy(): void { + this.recordingState.unsubscribe(); + this.newRecording.unsubscribe(); + } + + emitToggleRecording() { + this.recordingService.toggleRecording(); + } +}