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();
+   }
+}