speechrecorderng 2.23.7 → 2.24.0

package/fesm2020/speechrecorderng.mjs

@@ -22,6 +22,7 @@ import { MatButtonModule } from '@angular/material/button';
 import * as i1$3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i8 from '@angular/flex-layout/flex';
+import NoSleep from 'nosleep.js';
 import * as i7 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -7259,6 +7260,7 @@ class BasicRecorder {
         this.readonly = false;
         this.processingRecording = false;
         this.ac = null;
+        this._wakeLock = false;
         this._selectedDeviceId = undefined;
         this._channelCount = 2;
         this._session = null;
@@ -7271,6 +7273,7 @@ class BasicRecorder {
         this.audioFetchSubscription = null;
         this.destroyed = false;
         this.navigationDisabled = true;
+        this.noSleep = null;
         this.userAgent = UserAgentBuilder.userAgent();
         console.debug("Detected platform: " + this.userAgent.detectedPlatform);
         console.debug("Detected browser: " + this.userAgent.detectedBrowser);
@@ -7280,6 +7283,27 @@ class BasicRecorder {
         this.streamLevelMeasure = new StreamLevelMeasure();
         this.selCaptureDeviceId = null;
     }
+    get wakeLock() {
+        return this._wakeLock;
+    }
+    set wakeLock(value) {
+        this._wakeLock = value;
+    }
+    enableWakeLockCond() {
+        if (this.wakeLock === true) {
+            if (!this.noSleep) {
+                this.noSleep = new NoSleep();
+            }
+            if (!this.noSleep.isEnabled) {
+                this.noSleep.enable();
+            }
+        }
+    }
+    disableWakeLockCond() {
+        if (this.noSleep && this.noSleep.isEnabled) {
+            this.noSleep.disable();
+        }
+    }
     set audioDevices(audioDevices) {
         this._audioDevices = audioDevices;
     }
@@ -7872,6 +7896,7 @@ class SessionManager extends BasicRecorder {
         };
     }
     ngOnDestroy() {
+        this.disableWakeLockCond();
         this.destroyed = true;
         // TODO stop capture /playback
     }
@@ -8079,6 +8104,7 @@ class SessionManager extends BasicRecorder {
         }
     }
     startItem() {
+        this.enableWakeLockCond();
         this.transportActions.startAction.disabled = true;
         this.transportActions.pauseAction.disabled = true;
         if (this.readonly) {
@@ -8807,6 +8833,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 args: ['window:keydown', ['$event']]
             }] } });
 
+class RecorderComponent {
+}
+
 /**
  * Created by klausj on 17.06.2017.
  */
@@ -8853,8 +8882,9 @@ var Mode;
     Mode[Mode["SINGLE_SESSION"] = 0] = "SINGLE_SESSION";
     Mode[Mode["DEMO"] = 1] = "DEMO";
 })(Mode || (Mode = {}));
-class SpeechrecorderngComponent {
+class SpeechrecorderngComponent extends RecorderComponent {
     constructor(route, router, changeDetectorRef, sessionsService, projectService, scriptService, recFilesService, uploader) {
+        super();
         this.route = route;
         this.router = router;
         this.changeDetectorRef = changeDetectorRef;
@@ -8887,6 +8917,8 @@ class SpeechrecorderngComponent {
         }
     }
     ngAfterViewInit() {
+        // let wakeLockSupp=('wakeLock' in navigator);
+        // alert('Wake lock API supported: '+wakeLockSupp);
         if (this.sm.status !== 8 /* ERROR */) {
             let initSuccess = this.init();
             if (initSuccess) {
@@ -9049,6 +9081,7 @@ class SpeechrecorderngComponent {
         this.uploader.listener = (ue) => {
             this.uploadUpdate(ue);
         };
+        //TODO Duplicate code in AudioRecorderComponent
         window.addEventListener('beforeunload', (e) => {
             console.debug("Before page unload event");
             if (this.ready()) {
@@ -9130,6 +9163,9 @@ class SpeechrecorderngComponent {
         let chCnt = ProjectUtil.DEFAULT_AUDIO_CHANNEL_COUNT;
         if (project) {
             console.info("Project name: " + project.name);
+            if (project.recordingDeviceWakeLock === true) {
+                this.sm.wakeLock = true;
+            }
             this.sm.audioDevices = project.audioDevices;
             chCnt = ProjectUtil.audioChannelCount(project);
             console.info("Project requested recording channel count: " + chCnt);
@@ -9235,7 +9271,7 @@ class SpeechrecorderngComponent {
     }
 }
 SpeechrecorderngComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SpeechrecorderngComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i0.ChangeDetectorRef }, { token: SessionService }, { token: ProjectService }, { token: ScriptService }, { token: RecordingService }, { token: SpeechRecorderUploader }], target: i0.ɵɵFactoryTarget.Component });
-SpeechrecorderngComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SpeechrecorderngComponent, selector: "app-speechrecorder", providers: [SessionService], viewQueries: [{ propertyName: "sm", first: true, predicate: SessionManager, descendants: true, static: true }], ngImport: i0, template: `
+SpeechrecorderngComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SpeechrecorderngComponent, selector: "app-speechrecorder", providers: [SessionService], viewQueries: [{ propertyName: "sm", first: true, predicate: SessionManager, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <app-sprrecordingsession [projectName]="project?.name" [dataSaved]="dataSaved"></app-sprrecordingsession>
   `, isInline: true, styles: [":host{flex:2;display:flex;flex-direction:column;min-height:0}\n"], components: [{ type: SessionManager, selector: "app-sprrecordingsession", inputs: ["projectName", "dataSaved"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SpeechrecorderngComponent, decorators: [{
@@ -10893,11 +10929,11 @@ class Item {
     }
 }
 class AudioRecorder extends BasicRecorder {
-    constructor(changeDetectorRef, route, renderer, dialog, projectService, sessionService, recFileService, uploader, config) {
+    constructor(changeDetectorRef, renderer, route, dialog, projectService, sessionService, recFileService, uploader, config) {
         super(dialog, sessionService);
         this.changeDetectorRef = changeDetectorRef;
-        this.route = route;
         this.renderer = renderer;
+        this.route = route;
         this.dialog = dialog;
         this.projectService = projectService;
         this.sessionService = sessionService;
@@ -10918,6 +10954,7 @@ class AudioRecorder extends BasicRecorder {
         //selectedItemIdx: number;
         this._displayRecFile = null;
         this.displayRecFileVersion = 0;
+        //super(injector);
         this.status = 1 /* IDLE */;
         this.audio = document.getElementById('audio');
         if (this.config && this.config.enableUploadRecordings != null) {
@@ -10926,25 +10963,26 @@ class AudioRecorder extends BasicRecorder {
         if (this.config && this.config.enableDownloadRecordings != null) {
             this.enableDownloadRecordings = this.config.enableDownloadRecordings;
         }
-        this.init();
+        //this.init();
     }
     ngAfterViewInit() {
-        this.route.queryParams.subscribe((params) => {
-            if (params['sessionId']) {
-                this.fetchSession(params['sessionId']);
-            }
-        });
         this.streamLevelMeasure.levelListener = this.liveLevelDisplay;
         this.streamLevelMeasure.peakLevelListener = (peakLvlInDb) => {
             this.peakLevelInDb = peakLvlInDb;
             this.changeDetectorRef.detectChanges();
         };
+        //let wakeLockSupp=('wakeLock' in navigator);
+        //alert('Wake lock API supported: '+wakeLockSupp);
+    }
+    ready() {
+        return this.dataSaved && !this.isActive();
     }
     ngOnDestroy() {
+        this.disableWakeLockCond();
         this.destroyed = true;
         // TODO stop capture /playback
     }
-    init() {
+    ngOnInit() {
         this.transportActions.startAction.disabled = true;
         this.transportActions.stopAction.disabled = true;
         this.transportActions.nextAction.disabled = true;
@@ -10994,7 +11032,7 @@ class AudioRecorder extends BasicRecorder {
             return;
         }
         else {
-            this.controlAudioPlayer = new AudioPlayer(context, this);
+            //this.controlAudioPlayer = new AudioPlayer(context, this);
             this.ac = new AudioCapture(context);
             if (this.ac) {
                 this.transportActions.startAction.onAction = () => this.startItem();
@@ -11026,6 +11064,23 @@ class AudioRecorder extends BasicRecorder {
         this.uploader.listener = (ue) => {
             this.uploadUpdate(ue);
         };
+        let wakeLockSupp = ('wakeLock' in navigator);
+        // if(wakeLockSupp) {
+        //   let wakeLock = null;
+        //   try {
+        //     //@ts-ignore
+        //     wakeLock = navigator.wakeLock.request('screen');
+        //
+        //     //statusElem.textContent = 'Wake Lock is active!';
+        //   } catch (err) {
+        //     // The Wake Lock request has failed - usually system related, such as battery.
+        //     console.error('Wakelock failed'+err)
+        //   }
+        // }else{
+        //   let noSleep=new NoSleep();
+        //   noSleep.enable();
+        //
+        // }
     }
     onKeyPress(ke) {
         if (ke.key == ' ') {
@@ -11071,43 +11126,6 @@ class AudioRecorder extends BasicRecorder {
     isDefaultAudioTestSessionOverwriteingProjectRequirements() {
         return ((this._session != null) && (this._session.type === 'TEST_DEF_A') && (this.audioDevices != null) && this.audioDevices.length > 0);
     }
-    fetchSession(sessionId) {
-        //Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'statusMsg: Player initialized.'. Current value: 'statusMsg: Fetching session info...'.
-        // params.subscribe seems not to be asynchronous
-        // this.sm.statusAlertType='info';
-        // this.sm.statusMsg = 'Fetching session info...';
-        // this.sm.statusWaiting=true;
-        let sessObs = this.sessionService.sessionObserver(sessionId);
-        if (sessObs) {
-            sessObs.subscribe(sess => {
-                //this.setSession(sess);
-                this.statusAlertType = 'info';
-                this.statusMsg = 'Received session info.';
-                this.statusWaiting = false;
-                this.session = sess;
-                if (sess.project) {
-                    //console.debug("Session associated project: "+sess.project)
-                    this.projectService.projectObservable(sess.project).subscribe(project => {
-                        this.project = project;
-                        this.fetchRecordings(sess);
-                    }, reason => {
-                        this.statusMsg = reason;
-                        this.statusAlertType = 'error';
-                        this.statusWaiting = false;
-                        console.error("Error fetching project config: " + reason);
-                    });
-                }
-                else {
-                    console.info("Session has no associated project. Using default configuration.");
-                }
-            }, (reason) => {
-                this.statusMsg = reason;
-                this.statusAlertType = 'error';
-                this.statusWaiting = false;
-                console.error("Error fetching session " + reason);
-            });
-        }
-    }
     fetchRecordings(sess) {
         this.statusAlertType = 'info';
         this.statusMsg = 'Fetching infos of recordings...';
@@ -11159,6 +11177,9 @@ class AudioRecorder extends BasicRecorder {
         let chCnt = ProjectUtil.DEFAULT_AUDIO_CHANNEL_COUNT;
         if (project) {
             console.info("Project name: " + project.name);
+            if (project.recordingDeviceWakeLock === true) {
+                this.wakeLock = true;
+            }
             this.audioDevices = project.audioDevices;
             chCnt = ProjectUtil.audioChannelCount(project);
             console.info("Project requested recording channel count: " + chCnt);
@@ -11262,6 +11283,7 @@ class AudioRecorder extends BasicRecorder {
         }
     }
     startItem() {
+        this.enableWakeLockCond();
         this.transportActions.startAction.disabled = true;
         this.transportActions.pauseAction.disabled = true;
         if (this.readonly) {
@@ -11577,8 +11599,8 @@ class AudioRecorder extends BasicRecorder {
         }
     }
 }
-AudioRecorder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AudioRecorder, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.ActivatedRoute }, { token: i0.Renderer2 }, { token: i1$2.MatDialog }, { token: ProjectService }, { token: SessionService }, { token: RecordingService }, { token: SpeechRecorderUploader }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-AudioRecorder.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AudioRecorder, selector: "app-audiorecorder", inputs: { projectName: "projectName", dataSaved: "dataSaved" }, host: { listeners: { "window:keypress": "onKeyPress($event)", "window:keydown": "onKeyDown($event)" } }, providers: [SessionService], viewQueries: [{ propertyName: "recorderCombiPane", first: true, predicate: RecorderCombiPane, descendants: true, static: true }, { propertyName: "liveLevelDisplay", first: true, predicate: LevelBar, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+AudioRecorder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AudioRecorder, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1$1.ActivatedRoute }, { token: i1$2.MatDialog }, { token: ProjectService }, { token: SessionService }, { token: RecordingService }, { token: SpeechRecorderUploader }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
+AudioRecorder.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AudioRecorder, selector: "app-audiorecorder", inputs: { _project: "_project", projectName: "projectName", dataSaved: "dataSaved" }, host: { listeners: { "window:keypress": "onKeyPress($event)", "window:keydown": "onKeyDown($event)" } }, providers: [SessionService], viewQueries: [{ propertyName: "recorderCombiPane", first: true, predicate: RecorderCombiPane, descendants: true, static: true }, { propertyName: "liveLevelDisplay", first: true, predicate: LevelBar, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <app-warningbar [show]="isTestSession()" warningText="Test recording only!"></app-warningbar>
     <app-warningbar [show]="isDefaultAudioTestSession()"
                     warningText="This test uses default audio device! Regular sessions may require a particular audio device (microphone)!"></app-warningbar>
@@ -11634,7 +11656,7 @@ AudioRecorder.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                                  [ready]="dataSaved && !isActive()"></app-readystateindicator>
       </div>
     </div>
-  `, isInline: true, styles: [":host{flex:2;background:lightgrey;display:flex;flex-direction:column;margin:0;padding:0;min-height:0px;overflow:hidden}\n", ".ricontrols{padding:4px;box-sizing:border-box;height:100%}\n", ".dark{background:darkgray}\n", ".controlpanel{align-content:center;align-items:center;margin:0;padding:20px;min-height:-webkit-min-content;min-height:min-content}\n", ".startstop{width:100%;text-align:center;align-content:center;align-items:center}\n", ".bigbutton{min-width:70px;min-height:50px;font-size:50px;border-radius:20px}\n"], components: [{ type: WarningBar, selector: "app-warningbar", inputs: ["warningText", "show"] }, { type: RecorderCombiPane, selector: "app-recordercombipane", inputs: ["selectDisabled", "selectedRecordingFile", "audioSignalCollapsed", "displayAudioClip", "playStartAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "playStopAction"], outputs: ["selectedRecordingFileChanged"] }, { type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos"] }, { type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }, { type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }, { type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }] });
+  `, isInline: true, styles: [":host{flex:2;background:lightgrey;display:flex;flex-direction:column;margin:0;padding:0;height:100%;min-height:0px;overflow:hidden}\n", ".ricontrols{padding:4px;box-sizing:border-box;height:100%}\n", ".dark{background:darkgray}\n", ".controlpanel{align-content:center;align-items:center;margin:0;padding:20px;min-height:-webkit-min-content;min-height:min-content}\n", ".startstop{width:100%;text-align:center;align-content:center;align-items:center}\n", ".bigbutton{min-width:70px;min-height:50px;font-size:50px;border-radius:20px}\n"], components: [{ type: WarningBar, selector: "app-warningbar", inputs: ["warningText", "show"] }, { type: RecorderCombiPane, selector: "app-recordercombipane", inputs: ["selectDisabled", "selectedRecordingFile", "audioSignalCollapsed", "displayAudioClip", "playStartAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "playStopAction"], outputs: ["selectedRecordingFileChanged"] }, { type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos"] }, { type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }, { type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }, { type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AudioRecorder, decorators: [{
             type: Component,
             args: [{
@@ -11704,8 +11726,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
     flex-direction: column;
     margin: 0;
     padding: 0;
+    height: 100%;
     min-height: 0px;
-
       /* Prevents horizontal scroll bar on swipe right */
       overflow: hidden;
   }`, `.ricontrols {
@@ -11733,10 +11755,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
   }`
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.ActivatedRoute }, { type: i0.Renderer2 }, { type: i1$2.MatDialog }, { type: ProjectService }, { type: SessionService }, { type: RecordingService }, { type: SpeechRecorderUploader }, { type: SpeechRecorderConfig, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i1$1.ActivatedRoute }, { type: i1$2.MatDialog }, { type: ProjectService }, { type: SessionService }, { type: RecordingService }, { type: SpeechRecorderUploader }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
                     args: [SPEECHRECORDER_CONFIG]
-                }] }]; }, propDecorators: { projectName: [{
+                }] }]; }, propDecorators: { _project: [{
+                type: Input
+            }], projectName: [{
                 type: Input
             }], recorderCombiPane: [{
                 type: ViewChild,
@@ -11752,11 +11776,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             }], onKeyDown: [{
                 type: HostListener,
                 args: ['window:keydown', ['$event']]
+            }] } });
+class AudioRecorderComponent extends RecorderComponent {
+    constructor(injector, route, router, changeDetectorRef, sessionService, projectService, recFilesService) {
+        super();
+        this.injector = injector;
+        this.route = route;
+        this.router = router;
+        this.changeDetectorRef = changeDetectorRef;
+        this.sessionService = sessionService;
+        this.projectService = projectService;
+        this.recFilesService = recFilesService;
+        this.dataSaved = true;
+    }
+    ngOnInit() {
+        //super.ngOnInit();
+        let audioContext = AudioContextProvider.audioContextInstance();
+        if (audioContext) {
+            this.controlAudioPlayer = new AudioPlayer(audioContext, this.ar);
+        }
+        this.ar.controlAudioPlayer = this.controlAudioPlayer;
+        //TODO Duplicate code in SpeechRecorderComponent
+        window.addEventListener('beforeunload', (e) => {
+            console.debug("Before page unload event");
+            if (this.ready()) {
+                return;
+            }
+            else {
+                // all this attempts to customize the message do not work anymore (for security reasons)!!
+                var message = "Please do not leave the page, until all recordings are uploaded!";
+                alert(message);
+                e = e || window.event;
+                if (e) {
+                    e.returnValue = message;
+                    e.cancelBubble = true;
+                    if (e.stopPropagation) {
+                        e.stopPropagation();
+                    }
+                    if (e.preventDefault) {
+                        e.preventDefault();
+                    }
+                }
+                return message;
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.route.queryParams.subscribe((params) => {
+            if (params['sessionId']) {
+                this.fetchSession(params['sessionId']);
+            }
+        });
+        this.route.params.subscribe((params) => {
+            let routeParamsId = params['id'];
+            if (routeParamsId) {
+                this.fetchSession(routeParamsId);
+            }
+        });
+    }
+    ngOnDestroy() {
+        //super.ngOnDestroy();
+    }
+    fetchSession(sessionId) {
+        //Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'statusMsg: Player initialized.'. Current value: 'statusMsg: Fetching session info...'.
+        // params.subscribe seems not to be asynchronous
+        // this.sm.statusAlertType='info';
+        // this.sm.statusMsg = 'Fetching session info...';
+        // this.sm.statusWaiting=true;
+        let sessObs = this.sessionService.sessionObserver(sessionId);
+        if (sessObs) {
+            sessObs.subscribe(sess => {
+                this.ar.statusAlertType = 'info';
+                this.ar.statusMsg = 'Received session info.';
+                this.ar.statusWaiting = false;
+                this.session = sess;
+                this.ar.session = sess;
+                if (sess.project) {
+                    //console.debug("Session associated project: "+sess.project)
+                    this.projectService.projectObservable(sess.project).subscribe(project => {
+                        this.ar.project = project;
+                        this.ar.fetchRecordings(sess);
+                    }, reason => {
+                        this.ar.statusMsg = reason;
+                        this.ar.statusAlertType = 'error';
+                        this.ar.statusWaiting = false;
+                        console.error("Error fetching project config: " + reason);
+                    });
+                }
+                else {
+                    console.info("Session has no associated project. Using default configuration.");
+                }
+            }, (reason) => {
+                this.ar.statusMsg = reason;
+                this.ar.statusAlertType = 'error';
+                this.ar.statusWaiting = false;
+                console.error("Error fetching session " + reason);
+            });
+        }
+    }
+    ready() {
+        return this.dataSaved && !this.ar.isActive();
+    }
+}
+AudioRecorderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AudioRecorderComponent, deps: [{ token: i0.Injector }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i0.ChangeDetectorRef }, { token: SessionService }, { token: ProjectService }, { token: RecordingService }], target: i0.ɵɵFactoryTarget.Component });
+AudioRecorderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AudioRecorderComponent, selector: "app-audiorecorder-comp", providers: [SessionService], viewQueries: [{ propertyName: "ar", first: true, predicate: AudioRecorder, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <app-audiorecorder [projectName]="_project?.name" [dataSaved]="dataSaved"></app-audiorecorder>
+  `, isInline: true, styles: [":host{flex:2;display:flex;height:100%;flex-direction:column;min-height:0}\n"], components: [{ type: AudioRecorder, selector: "app-audiorecorder", inputs: ["_project", "projectName", "dataSaved"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AudioRecorderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-audiorecorder-comp',
+                    providers: [SessionService],
+                    template: `
+    <app-audiorecorder [projectName]="_project?.name" [dataSaved]="dataSaved"></app-audiorecorder>
+  `,
+                    styles: [`:host{
+    flex: 2;
+    display: flex;
+      height: 100%;
+    flex-direction: column;
+    min-height:0;
+
+  }`]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i0.ChangeDetectorRef }, { type: SessionService }, { type: ProjectService }, { type: RecordingService }]; }, propDecorators: { ar: [{
+                type: ViewChild,
+                args: [AudioRecorder, { static: true }]
             }] } });
 
 const SPR_ROUTES = [
     { path: 'spr/session/:id', component: SpeechrecorderngComponent },
-    { path: 'recorder', component: AudioRecorder },
+    { path: 'recorder/session/:id', component: AudioRecorderComponent },
+    { path: 'recorder', component: AudioRecorderComponent },
     { path: 'spr/db/project/:project/session/:sessionId/recordingfile/_view/:recordingFileId', component: RecordingFileViewComponent },
     { path: 'spr/db/project/:project/session/:sessionId/recordingfile/_edit/:recordingFileId', component: RecordingFileUI },
     { path: 'spr/db/project/:project/session/:sessionId/recordingfile/_view', component: RecordingFileViewComponent },
@@ -11784,20 +11935,20 @@ class SpeechrecorderngModule {
 }
 SpeechrecorderngModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SpeechrecorderngModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SpeechrecorderngModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SpeechrecorderngModule, declarations: [AudioSignal, Sonagram, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, Progress, SimpleTrafficLight, Recinstructions, Prompter, PromptContainer, PromptingContainer, Prompting, StatusDisplay,
-        ProgressDisplay, RecordingItemDisplay, RecordingItemControls, UploadStatus, TransportPanel, ReadyStateIndicator, ControlPanel, WarningBar, AudioRecorder, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent, RecordingList, RecorderCombiPane, AudioRecorder], imports: [i1$1.RouterModule, FlexLayoutModule, CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, HttpClientModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule], exports: [MessageDialog, SpeechrecorderngComponent, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, AudioRecorder] });
+        ProgressDisplay, RecordingItemDisplay, RecordingItemControls, UploadStatus, TransportPanel, ReadyStateIndicator, ControlPanel, WarningBar, AudioRecorder, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, AudioRecorderComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent, RecordingList, RecorderCombiPane, AudioRecorder], imports: [i1$1.RouterModule, FlexLayoutModule, CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, HttpClientModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule], exports: [MessageDialog, SpeechrecorderngComponent, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, AudioRecorder] });
 SpeechrecorderngModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SpeechrecorderngModule, providers: [SessionService, ProjectService, ScriptService, RecordingService, RecordingFileService, SpeechRecorderUploader], imports: [[RouterModule.forChild(SPR_ROUTES), FlexLayoutModule, CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, HttpClientModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SpeechrecorderngModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AudioSignal, Sonagram, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, Progress, SimpleTrafficLight, Recinstructions, Prompter, PromptContainer, PromptingContainer, Prompting, StatusDisplay,
-                        ProgressDisplay, RecordingItemDisplay, RecordingItemControls, UploadStatus, TransportPanel, ReadyStateIndicator, ControlPanel, WarningBar, AudioRecorder, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent, RecordingList, RecorderCombiPane, AudioRecorder],
+                        ProgressDisplay, RecordingItemDisplay, RecordingItemControls, UploadStatus, TransportPanel, ReadyStateIndicator, ControlPanel, WarningBar, AudioRecorder, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, AudioRecorderComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent, RecordingList, RecorderCombiPane, AudioRecorder],
                     exports: [MessageDialog, SpeechrecorderngComponent, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, AudioRecorder],
                     imports: [RouterModule.forChild(SPR_ROUTES), FlexLayoutModule, CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, HttpClientModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule],
                     providers: [SessionService, ProjectService, ScriptService, RecordingService, RecordingFileService, SpeechRecorderUploader]
                 }]
         }] });
 
-const VERSION = '2.23.7';
+const VERSION = '2.24.0';
 
 /*
  * Public API Surface of speechrecorderng
@@ -11807,5 +11958,5 @@ const VERSION = '2.23.7';
  * Generated bundle index. Do not edit.
  */
 
-export { Action, ApiType, AudioClip, AudioClipUIContainer, AudioContextProvider, AudioDisplay, AudioDisplayControl, AudioDisplayPlayer, AudioDisplayScrollPane, AudioPlayer, AudioPlayerEvent, AudioRecorder, EventType, LevelBar, MessageDialog, ProjectService, RecordingFileService, RecordingFileUI, RecordingFileViewComponent, RecordingService, SPEECHRECORDER_CONFIG, ScriptService, ScrollPaneHorizontal, Selection, SessionService, SpeechRecorderConfig, SpeechrecorderngComponent, SpeechrecorderngModule, SprRecordingFile, UUID, VERSION };
+export { Action, ApiType, AudioClip, AudioClipUIContainer, AudioContextProvider, AudioDisplay, AudioDisplayControl, AudioDisplayPlayer, AudioDisplayScrollPane, AudioPlayer, AudioPlayerEvent, AudioRecorder, AudioRecorderComponent, EventType, LevelBar, MessageDialog, ProjectService, RecorderComponent, RecordingFileService, RecordingFileUI, RecordingFileViewComponent, RecordingService, SPEECHRECORDER_CONFIG, ScriptService, ScrollPaneHorizontal, Selection, SessionService, SpeechRecorderConfig, SpeechrecorderngComponent, SpeechrecorderngModule, SprRecordingFile, UUID, VERSION, WavWriter };
 //# sourceMappingURL=speechrecorderng.mjs.map