workaround for updating progress bar in Firefox

src/app/component/record/record.component.html

@@ -2,7 +2,7 @@
     <h2 class="mat-h2">Recognize</h2>
 
     <div id="progress" >
-        <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
+        <mat-progress-bar mode="determinate" [value]="progressbarValue"></mat-progress-bar>
     </div>
 
     <div id="button-container">

src/app/component/record/record.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { interval } from 'rxjs';
 import { Recorder } from 'src/app/service/transcription/recorder';
 
 @Component({
@@ -9,17 +10,18 @@ import { Recorder } from 'src/app/service/transcription/recorder';
 export class RecordComponent {
 
     progress: number;
+    progressbarValue: number;
 
     constructor(
         private router: Router,
         private recorder: Recorder) {
 
-        this.recorder.progress.subscribe(progress =>
-            this.progress = progress
-        );
+        // using this.progress directly in mat-progress-bar does not work in Firefox
+        this.recorder.progress.subscribe(progress => this.progress = progress);
 
         this.recorder.transcriptionResult.subscribe(transcription => {
             this.progress = 0;
+            this.progressbarValue = 0;
             if (!transcription) {
                 return;
             }
@@ -28,7 +30,18 @@ export class RecordComponent {
         });
     }
 
-    async startRecording(): Promise<void> {
+
+    async startRecording() {
+        const timer = interval(100);
+
+        const sub = timer.subscribe((sec) => {
+            this.progressbarValue = this.progress;
+
+            if (this.progressbarValue >= 100) {
+                sub.unsubscribe();
+            }
+        });
+
         await this.recorder.initAudio();
         this.recorder.start();
     }