speechrecorderng 2.21.4 → 2.22.0

package/{fesm2015/speechrecorderng.js → fesm2020/speechrecorderng.mjs}

@@ -31,7 +31,8 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatGridListModule } from '@angular/material/grid-list';
 import * as i6 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatTableModule } from '@angular/material/table';
+import * as i2$2 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
 
@@ -847,6 +848,9 @@ class AudioCapture {
                 let aTrack = aTracks[i];
                 console.info("Track audio info: id: " + aTrack.id + " kind: " + aTrack.kind + " label: \"" + aTrack.label + "\"");
                 let mtrSts = aTrack.getSettings();
+                // Typescript lib.dom.ts MediaTrackSettings.channelCount is missing
+                // https://github.com/mdn/browser-compat-data/blob/5493d8f937e05b2ddbd41b99f5bdfad4a1f2ed85/api/MediaTrackSettings.json
+                //@ts-ignore
                 console.info("Track audio settings: Ch cnt: " + mtrSts.channelCount + ", AGC: " + mtrSts.autoGainControl + ", Echo cancell.: " + mtrSts.echoCancellation);
                 if (mtrSts.autoGainControl) {
                     this.agcStatus = mtrSts.autoGainControl;
@@ -1400,7 +1404,7 @@ class MediaitemUtil {
                     let srcUrl = new URL(src);
                     srcPn = srcUrl.pathname;
                 }
-                catch (_a) {
+                catch {
                     srcPn = src;
                 }
                 // Get filename without extension
@@ -1434,16 +1438,16 @@ class PromptitemUtil {
     }
 }
 
-class RecordingFileDescriptor {
+class RecordingFileDescriptorImpl {
     constructor() { }
 }
-class RecordingFile extends RecordingFileDescriptor {
-    constructor(sessionId, itemcode, version, audioBuffer) {
-        super();
+class RecordingFile {
+    constructor(uuid, sessionId, audioBuffer) {
         this.recordingFileId = null;
         this.uuid = null;
         this.date = null;
         this._dateAsDateObj = null;
+        this.startedDate = null;
         this.audioBuffer = null;
         this.session = null;
         this.frames = null;
@@ -1451,10 +1455,26 @@ class RecordingFile extends RecordingFileDescriptor {
         this.editStartFrame = null;
         this.editEndFrame = null;
         this.session = sessionId;
+        this.audioBuffer = audioBuffer;
+        this.uuid = uuid;
+    }
+    filenameString() {
+        let fns = '';
+        if (this.session) {
+            fns += this.session;
+            fns += '_';
+        }
+        fns += this.uuid;
+        return fns;
+    }
+}
+class SprRecordingFile extends RecordingFile {
+    constructor(sessionId, itemcode, version, audioBuffer) {
+        super(UUID.generate(), sessionId, audioBuffer);
+        this.session = sessionId;
         this.itemCode = itemcode;
         this.version = version;
         this.audioBuffer = audioBuffer;
-        this.uuid = UUID.generate();
     }
     filenameString() {
         let fns = '';
@@ -1521,7 +1541,14 @@ class UploaderStatusChangeEvent {
 class Upload {
     constructor(blob, url) {
         this.toString = () => {
-            return `Upload: Status: ${this.status}, URL: ${this._url}, Size: ${this._data.size}`;
+            let s = `Upload: Status: ${this.status}, URL: ${this._url}`;
+            if (this._data instanceof Blob) {
+                s = s + `, Size: ${this._data.size}`;
+            }
+            else if (this._data instanceof FormData) {
+                // TODO (iterate through parts ??)
+            }
+            return s;
         };
         this._data = blob;
         this._url = url;
@@ -1549,8 +1576,27 @@ class Uploader {
         this._sizeDone = 0;
         this.retryTimerRunning = false;
         this.retryTimerId = null;
+        this.te = new TextEncoder();
         this.que = new Array();
     }
+    dataSize(dt) {
+        let si = 0;
+        if (dt instanceof Blob) {
+            si = dt.size;
+        }
+        else if (dt instanceof FormData) {
+            dt.forEach((v, k) => {
+                if (v instanceof File) {
+                    si += v.size;
+                }
+                else if (typeof v === 'string') {
+                    // encode to UT-f8 to get upload size
+                    si += this.te.encode().length;
+                }
+            });
+        }
+        return si;
+    }
     uploadDone(ul) {
         ul.status = UploadStatus$1.DONE;
         // remove upload from queue
@@ -1558,7 +1604,7 @@ class Uploader {
             if (this.que[i] === ul) {
                 // found, remove
                 this.que.splice(i, 1);
-                let ulSize = ul.data.size;
+                let ulSize = this.dataSize(ul.data);
                 this._sizeDone += ulSize;
                 break;
             }
@@ -1576,7 +1622,7 @@ class Uploader {
         else {
             this.status = UploaderStatus.UPLOADING;
         }
-        let dSize = ul.data.size;
+        let dSize = this.dataSize(ul.data);
         let timeoutForDataSize = dSize * this.POST_TIMEOUT_PER_KB / 1000;
         let timeoVal = Math.round(this.POST_MIN_TIMEOUT + timeoutForDataSize);
         // pipe(timeout()) is not the same as xhr.timeout
@@ -1682,7 +1728,7 @@ class Uploader {
     }
     queueUpload(ul) {
         if (ul) {
-            let ulSize = ul.data.size;
+            let ulSize = this.dataSize(ul.data);
             this.que.push(ul);
             this._sizeQueued += ulSize;
             this.process();
@@ -1708,9 +1754,9 @@ class SpeechRecorderConfig {
         this.withCredentials = false;
     }
 }
-SpeechRecorderConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SpeechRecorderConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SpeechRecorderConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SpeechRecorderConfig });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SpeechRecorderConfig, decorators: [{
+SpeechRecorderConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SpeechRecorderConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SpeechRecorderConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SpeechRecorderConfig });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SpeechRecorderConfig, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -1762,9 +1808,9 @@ class ProjectService {
     }
 }
 ProjectService.PROJECT_API_CTX = 'project';
-ProjectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ProjectService, deps: [{ token: i1.HttpClient }, { token: i4.PlatformLocation }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-ProjectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ProjectService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ProjectService, decorators: [{
+ProjectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ProjectService, deps: [{ token: i1.HttpClient }, { token: i4.PlatformLocation }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+ProjectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ProjectService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ProjectService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i4.PlatformLocation }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
@@ -1820,9 +1866,9 @@ class SessionService {
     }
 }
 SessionService.SESSION_API_CTX = 'session';
-SessionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SessionService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-SessionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SessionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SessionService, decorators: [{
+SessionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SessionService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+SessionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SessionService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SessionService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
@@ -2110,14 +2156,14 @@ class LevelBar {
         }
     }
 }
-LevelBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: LevelBar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-LevelBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: LevelBar, selector: "audio-levelbar", inputs: { streamingMode: "streamingMode", displayLevelInfos: "displayLevelInfos" }, host: { listeners: { "scroll": "onScroll($event)", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "virtualCanvasRef", first: true, predicate: ["virtualCanvas"], descendants: true, static: true }, { propertyName: "liveLevelCanvasRef", first: true, predicate: ["levelbar"], descendants: true, static: true }, { propertyName: "markerCanvasRef", first: true, predicate: ["markerCanvas"], descendants: true, static: true }], ngImport: i0, template: `
+LevelBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: LevelBar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+LevelBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: LevelBar, selector: "audio-levelbar", inputs: { streamingMode: "streamingMode", displayLevelInfos: "displayLevelInfos" }, host: { listeners: { "scroll": "onScroll($event)", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "virtualCanvasRef", first: true, predicate: ["virtualCanvas"], descendants: true, static: true }, { propertyName: "liveLevelCanvasRef", first: true, predicate: ["levelbar"], descendants: true, static: true }, { propertyName: "markerCanvasRef", first: true, predicate: ["markerCanvas"], descendants: true, static: true }], ngImport: i0, template: `
     <div #virtualCanvas>
       <canvas #levelbar></canvas>
       <canvas #markerCanvas></canvas>
     </div>
-  `, isInline: true, styles: [":host {\n\n    width: 100%;\n    background: darkgray;\n    box-sizing: border-box;\n    height: 100%;\n    position: relative;\n    overflow-x: scroll;\n    overflow-y: auto;\n  }", "div {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    /*position: absolute;*/\n    box-sizing: border-box;\n  }", "canvas {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n  }"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: LevelBar, decorators: [{
+  `, isInline: true, styles: [":host{width:100%;background:darkgray;box-sizing:border-box;height:100%;position:relative;overflow-x:scroll;overflow-y:auto}\n", "div{top:0;left:0;width:100%;height:100%;box-sizing:border-box}\n", "canvas{top:0;left:0;width:100%;height:100%;position:absolute}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: LevelBar, decorators: [{
             type: Component,
             args: [{
                     selector: 'audio-levelbar',
@@ -2228,8 +2274,8 @@ class RecordingItemControls {
         // this.status = 'ERROR';
     }
 }
-RecordingItemControls.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingItemControls, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-RecordingItemControls.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: { audioSignalCollapsed: "audioSignalCollapsed", enableDownload: "enableDownload", peakDbLvl: "peakDbLvl", agc: "agc", audioLoaded: "audioLoaded", playStartAction: "playStartAction", playStopAction: "playStopAction", displayLevelInfos: "displayLevelInfos" }, outputs: { onShowRecordingDetails: "onShowRecordingDetails", onDownloadRecording: "onDownloadRecording" }, ngImport: i0, template: `
+RecordingItemControls.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingItemControls, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+RecordingItemControls.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: { audioSignalCollapsed: "audioSignalCollapsed", enableDownload: "enableDownload", peakDbLvl: "peakDbLvl", agc: "agc", audioLoaded: "audioLoaded", playStartAction: "playStartAction", playStopAction: "playStopAction", displayLevelInfos: "displayLevelInfos" }, outputs: { onShowRecordingDetails: "onShowRecordingDetails", onDownloadRecording: "onDownloadRecording" }, ngImport: i0, template: `
         <button matTooltip="Start playback" (click)="playStartAction?.perform()"
                 [disabled]="playStartAction?.disabled"
                 [style.color]="playStartAction?.disabled ? 'grey' : 'green'">
@@ -2251,8 +2297,8 @@ RecordingItemControls.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <div style="min-width: 14ch;padding:2px"><table style="border-style: none"><tr><td>Peak:</td><td><span matTooltip="Peak level"
                                                                         [style.color]="(peakDbLvl > warnDbLevel)?'red':'black'">{{peakDbLvl | number:'1.1-1'}} dB </span></td></tr>
           <tr *ngIf="_agc"><td>AGC:</td><td><span matTooltip="Auto gain control">{{agcString}}</span></td></tr></table></div>
-    `, isInline: true, styles: [":host {\n        flex: 0; /* only required vertical space */\n        width: 100%;\n        background: darkgray;\n        padding: 4px;\n        box-sizing: border-box;\n        height: 100%;\n\n        display: flex; /* flex container: left level bar, right decimal peak level value */\n        flex-direction: row;\n        flex-wrap: nowrap; /* wrap could completely destroy the layout */\n    }", "span {\n        flex: 0;\n        font-weight: bold;\n        display: inline-block;\n        white-space: nowrap;\n        box-sizing: border-box;\n    }"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { 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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i4.DecimalPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingItemControls, decorators: [{
+    `, isInline: true, styles: [":host{flex:0;width:100%;background:darkgray;padding:4px;box-sizing:border-box;height:100%;display:flex;flex-direction:row;flex-wrap:nowrap}\n", "span{flex:0;font-weight:700;display:inline-block;white-space:nowrap;box-sizing:border-box}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { 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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i4.DecimalPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingItemControls, decorators: [{
             type: Component,
             args: [{
                     selector: 'spr-recordingitemcontrols',
@@ -2391,14 +2437,14 @@ class RecordingItemDisplay {
         this.changeDetectorRef.detectChanges();
     }
 }
-RecordingItemDisplay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingItemDisplay, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-RecordingItemDisplay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: RecordingItemDisplay, selector: "spr-recordingitemdisplay", inputs: { streamingMode: "streamingMode", audioSignalCollapsed: "audioSignalCollapsed", enableDownload: "enableDownload", agc: "agc", playStartAction: "playStartAction", playStopAction: "playStopAction", displayAudioBuffer: "displayAudioBuffer", displayLevelInfos: "displayLevelInfos" }, outputs: { onShowRecordingDetails: "onShowRecordingDetails", onDownloadRecording: "onDownloadRecording" }, viewQueries: [{ propertyName: "liveLevel", first: true, predicate: LevelBar, descendants: true, static: true }], ngImport: i0, template: `
+RecordingItemDisplay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingItemDisplay, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+RecordingItemDisplay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: RecordingItemDisplay, selector: "spr-recordingitemdisplay", inputs: { streamingMode: "streamingMode", audioSignalCollapsed: "audioSignalCollapsed", enableDownload: "enableDownload", agc: "agc", playStartAction: "playStartAction", playStopAction: "playStopAction", displayAudioBuffer: "displayAudioBuffer", displayLevelInfos: "displayLevelInfos" }, outputs: { onShowRecordingDetails: "onShowRecordingDetails", onDownloadRecording: "onDownloadRecording" }, viewQueries: [{ propertyName: "liveLevel", first: true, predicate: LevelBar, descendants: true, static: true }], ngImport: i0, template: `
       <div fxLayout="row" fxLayout.xs="column" [ngStyle]="{'height.px':100,'min-height.px': 100}" [ngStyle.xs]="{'height.px':125,'min-height.px': 125}">
         <audio-levelbar fxFlex="1 0 1" [streamingMode]="streamingMode" [displayLevelInfos]="_displayLevelInfos"></audio-levelbar>
         <spr-recordingitemcontrols fxFlex="0 0 0" [audioLoaded]="displayAudioBuffer!==null" [playStartAction]="playStartAction" [playStopAction]="playStopAction" [peakDbLvl]="peakDbLvl" [agc]="_agc" (onShowRecordingDetails)="onShowRecordingDetails.emit()"></spr-recordingitemcontrols>
       </div>
-    `, isInline: true, styles: ["div {\n        width: 100%;\n        background: darkgray;\n        padding: 4px;\n        box-sizing: border-box;\n        flex-wrap: nowrap; /* wrap could completely destroy the layout */\n    }", "audio-levelbar {\n        box-sizing: border-box;\n    }"], components: [{ 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"] }], 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingItemDisplay, decorators: [{
+    `, isInline: true, styles: ["div{width:100%;background:darkgray;padding:4px;box-sizing:border-box;flex-wrap:nowrap}\n", "audio-levelbar{box-sizing:border-box}\n"], components: [{ 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"] }], 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingItemDisplay, decorators: [{
             type: Component,
             args: [{
                     selector: 'spr-recordingitemdisplay',
@@ -2655,8 +2701,7 @@ class LevelMeasure {
         });
     }
     terminateWorker() {
-        var _a;
-        (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
+        this.worker?.terminate();
     }
     /*
      *  Method used as worker code.
@@ -2755,14 +2800,13 @@ class StreamLevelMeasure {
         }
     }
     write(bufferData) {
-        var _a;
         let bufArrCopies = new Array(bufferData.length);
         let buffers = new Array(bufferData.length);
         for (let ch = 0; ch < bufferData.length; ch++) {
             bufArrCopies[ch] = bufferData[ch].slice();
             buffers[ch] = bufArrCopies[ch].buffer;
         }
-        (_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage({
+        this.worker?.postMessage({
             streamFinished: false,
             audioData: buffers,
             chs: this.channelCount,
@@ -2772,12 +2816,10 @@ class StreamLevelMeasure {
         return bufArrCopies[0].length;
     }
     flush() {
-        var _a;
-        (_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage({ streamFinished: true });
+        this.worker?.postMessage({ streamFinished: true });
     }
     close() {
-        var _a;
-        (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
+        this.worker?.terminate();
     }
     /*
      *  Method used as worker code.
@@ -2840,8 +2882,7 @@ class StreamLevelMeasure {
         }
     }
     stop() {
-        var _a;
-        (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
+        this.worker?.terminate();
     }
 }
 
@@ -2877,16 +2918,16 @@ class SimpleTrafficLight {
         }
     }
 }
-SimpleTrafficLight.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SimpleTrafficLight, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SimpleTrafficLight.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SimpleTrafficLight, selector: "app-simpletrafficlight", inputs: { status: "status" }, ngImport: i0, template: `
+SimpleTrafficLight.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SimpleTrafficLight, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SimpleTrafficLight.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: SimpleTrafficLight, selector: "app-simpletrafficlight", inputs: { status: "status" }, ngImport: i0, template: `
 
     <div>
       <div class="circle {{lighttop}}"></div>
       <div class="circle {{lightmid}}"></div>
       <div class="circle {{lightbottom}}"></div>
     </div>
-  `, isInline: true, styles: [".circle {\n    width: 50px;\n    height: 50px;\n    border-radius: 50%;\n    margin: 5px;\n    background: grey;\n  }", ".red {\n    background: red;\n  }\n  ", "\n    .yellow {\n      background: yellow;\n    }\n  ", "\n    .green {\n      background: green;\n    }\n  ", "\n    .black {\n      background: black;\n    }", ":host {\n      display: flex;\n      flex-direction: column;\n      background: black;\n          \n      padding: 2px;\n      height: 170px;\n      max-height: 170px;\n      flex: 0 0 content;\n    }\n    "] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SimpleTrafficLight, decorators: [{
+  `, isInline: true, styles: [".circle{width:50px;height:50px;border-radius:50%;margin:5px;background:grey}\n", ".red{background:red}\n", ".yellow{background:yellow}\n", ".green{background:green}\n", ".black{background:black}\n", ":host{display:flex;flex-direction:column;background:black;padding:2px;height:170px;max-height:170px;flex:0 0 content}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SimpleTrafficLight, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-simpletrafficlight',
@@ -2992,9 +3033,9 @@ class CanvasLayerComponent {
         }
     }
 }
-CanvasLayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: CanvasLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CanvasLayerComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: CanvasLayerComponent, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: CanvasLayerComponent, decorators: [{
+CanvasLayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CanvasLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CanvasLayerComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: CanvasLayerComponent, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CanvasLayerComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return []; } });
 
@@ -3178,46 +3219,58 @@ class BasicAudioCanvasLayerComponent extends CanvasLayerComponent {
         for (let ci = 0; ci < this.canvasLayers.length; ci++) {
             let cl = this.canvasLayers[ci];
             const leftStyle = bounds.position.left + 'px';
+            if (cl.style.left != leftStyle) {
+                cl.style.left = leftStyle;
+            }
             const topStyle = bounds.position.top + 'px';
-            cl.style.left = leftStyle;
-            cl.style.top = topStyle;
+            if (cl.style.top != topStyle) {
+                cl.style.top = topStyle;
+            }
         }
         if (bounds.dimension.width) {
-            let intW = Math.round(bounds.dimension.width);
+            let intW = Math.floor(bounds.dimension.width);
             if (redraw) {
                 // Do not set width of background canvas (causes flicker on start render)
                 for (let ci = 1; ci < this.canvasLayers.length; ci++) {
                     let cl = this.canvasLayers[ci];
-                    cl.width = intW;
+                    if (cl.width != intW) {
+                        cl.width = intW;
+                    }
                 }
             }
             let wStr = intW.toString() + 'px';
             for (let ci = 0; ci < this.canvasLayers.length; ci++) {
                 let cl = this.canvasLayers[ci];
-                cl.style.width = wStr;
+                if (cl.style.width != wStr) {
+                    cl.style.width = wStr;
+                }
             }
         }
         if (bounds.dimension.height) {
-            let intH = Math.round(bounds.dimension.height);
+            let intH = Math.floor(bounds.dimension.height);
             if (redraw) {
                 // Do not set height of background canvas (causes flicker on start render)
                 for (let ci = 1; ci < this.canvasLayers.length; ci++) {
                     let cl = this.canvasLayers[ci];
-                    cl.height = intH;
+                    if (cl.height != intH) {
+                        cl.height = intH;
+                    }
                 }
             }
             let hStr = intH + 'px';
             for (let ci = 0; ci < this.canvasLayers.length; ci++) {
                 let cl = this.canvasLayers[ci];
-                cl.style.height = hStr;
+                if (cl.style.height != hStr) {
+                    cl.style.height = hStr;
+                }
             }
         }
         //});
     }
 }
-BasicAudioCanvasLayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BasicAudioCanvasLayerComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-BasicAudioCanvasLayerComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: BasicAudioCanvasLayerComponent, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BasicAudioCanvasLayerComponent, decorators: [{
+BasicAudioCanvasLayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: BasicAudioCanvasLayerComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+BasicAudioCanvasLayerComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: BasicAudioCanvasLayerComponent, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: BasicAudioCanvasLayerComponent, decorators: [{
             type: Directive
         }] });
 class AudioCanvasLayerComponent extends BasicAudioCanvasLayerComponent {
@@ -3418,9 +3471,9 @@ class AudioCanvasLayerComponent extends BasicAudioCanvasLayerComponent {
         }
     }
 }
-AudioCanvasLayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AudioCanvasLayerComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AudioCanvasLayerComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: AudioCanvasLayerComponent, inputs: { pointerPosition: "pointerPosition", selecting: "selecting", selection: "selection" }, outputs: { pointerPositionEventEmitter: "pointerPositionEventEmitter", selectingEventEmitter: "selectingEventEmitter", selectedEventEmitter: "selectedEventEmitter" }, host: { listeners: { "document:mouseup": "onMouseup($event)" } }, viewQueries: [{ propertyName: "bgCanvasRef", first: true, predicate: ["bg"], descendants: true, static: true }, { propertyName: "cursorCanvasRef", first: true, predicate: ["cursor"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AudioCanvasLayerComponent, decorators: [{
+AudioCanvasLayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioCanvasLayerComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AudioCanvasLayerComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: AudioCanvasLayerComponent, inputs: { pointerPosition: "pointerPosition", selecting: "selecting", selection: "selection" }, outputs: { pointerPositionEventEmitter: "pointerPositionEventEmitter", selectingEventEmitter: "selectingEventEmitter", selectedEventEmitter: "selectedEventEmitter" }, host: { listeners: { "document:mouseup": "onMouseup($event)" } }, viewQueries: [{ propertyName: "bgCanvasRef", first: true, predicate: ["bg"], descendants: true, static: true }, { propertyName: "cursorCanvasRef", first: true, predicate: ["cursor"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioCanvasLayerComponent, decorators: [{
             type: Directive
         }], propDecorators: { bgCanvasRef: [{
                 type: ViewChild,
@@ -3743,14 +3796,14 @@ class AudioSignal extends AudioCanvasLayerComponent {
         this.playFramePosition = 0;
     }
 }
-AudioSignal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AudioSignal, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AudioSignal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AudioSignal, selector: "audio-signal", viewQueries: [{ propertyName: "audioSignalCanvasRef", first: true, predicate: ["audioSignal"], descendants: true, static: true }, { propertyName: "playPosCanvasRef", first: true, predicate: ["marker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+AudioSignal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioSignal, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AudioSignal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: AudioSignal, selector: "audio-signal", viewQueries: [{ propertyName: "audioSignalCanvasRef", first: true, predicate: ["audioSignal"], descendants: true, static: true }, { propertyName: "playPosCanvasRef", first: true, predicate: ["marker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <canvas #bg height="10"></canvas>
     <canvas #audioSignal height="10"></canvas>
     <canvas #cursor height="10" (mousedown)="selectionStart($event)" (mouseover)="updateCursorCanvas($event)" (mousemove)="updateCursorCanvas($event)"
             (mouseleave)="updateCursorCanvas($event, false)"></canvas>
-    <canvas #marker height="10"></canvas>`, isInline: true, styles: [":host{\n      min-height: 0px;\n    }", "canvas {\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    min-height: 0px;\n    position: absolute;\n  }"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AudioSignal, decorators: [{
+    <canvas #marker height="10"></canvas>`, isInline: true, styles: [":host{min-height:0px}\n", "canvas{top:0;left:0;width:0;height:0;min-height:0px;position:absolute}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioSignal, decorators: [{
             type: Component,
             args: [{
                     selector: 'audio-signal',
@@ -4678,14 +4731,14 @@ class Sonagram extends AudioCanvasLayerComponent {
         //this.startRender();
     }
 }
-Sonagram.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: Sonagram, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-Sonagram.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: Sonagram, selector: "audio-sonagram", viewQueries: [{ propertyName: "sonagramCanvasRef", first: true, predicate: ["sonagram"], descendants: true, static: true }, { propertyName: "markerCanvasRef", first: true, predicate: ["marker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+Sonagram.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: Sonagram, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+Sonagram.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: Sonagram, selector: "audio-sonagram", viewQueries: [{ propertyName: "sonagramCanvasRef", first: true, predicate: ["sonagram"], descendants: true, static: true }, { propertyName: "markerCanvasRef", first: true, predicate: ["marker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
         <canvas #sonagram height="10"></canvas>
         <canvas #bg height="10"></canvas>
         <canvas #cursor height="10" (mousedown)="selectionStart($event)" (mouseover)="updateCursorCanvas($event)" (mousemove)="updateCursorCanvas($event)"
                 (mouseleave)="updateCursorCanvas($event, false)"></canvas>
-        <canvas #marker height="10"></canvas>`, isInline: true, styles: [":host{\n      min-height: 0px;\n    }", "canvas {\n        top: 0;\n        left: 0;\n        width: 0;\n        height: 0;\n      min-height: 0px;\n        position: absolute;\n    }"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: Sonagram, decorators: [{
+        <canvas #marker height="10"></canvas>`, isInline: true, styles: [":host{min-height:0px}\n", "canvas{top:0;left:0;width:0;height:0;min-height:0px;position:absolute}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: Sonagram, decorators: [{
             type: Component,
             args: [{
                     selector: 'audio-sonagram',
@@ -4939,17 +4992,32 @@ class AudioClipUIContainer extends BasicAudioCanvasLayerComponent {
         }
         // Divider
         // left position
-        this.dc.style.left = vbLeft + 'px';
+        let vbLeftStyl = vbLeft + 'px';
+        if (this.dc.style.left != vbLeftStyl) {
+            this.dc.style.left = vbLeftStyl;
+        }
         // top position
         const dTop = asH;
         const dTopStr = dTop + 'px';
-        this.dc.style.top = dTopStr;
+        if (this.dc.style.top != dTopStr) {
+            this.dc.style.top = dTopStr;
+        }
         // width
-        this.dc.style.width = vbWidth + 'px';
-        this.dc.width = vbWidth;
+        let vbWidthStyle = vbWidth + 'px';
+        if (this.dc.style.width != vbWidthStyle) {
+            this.dc.style.width = vbWidthStyle;
+        }
+        if (this.dc.width != vbWidth) {
+            this.dc.width = vbWidth;
+        }
         // height
-        this.dc.height = AudioClipUIContainer.DIVIDER_PIXEL_SIZE;
-        this.dc.style.height = AudioClipUIContainer.DIVIDER_PIXEL_SIZE.toString() + 'px';
+        if (this.dc.height != AudioClipUIContainer.DIVIDER_PIXEL_SIZE) {
+            this.dc.height = AudioClipUIContainer.DIVIDER_PIXEL_SIZE;
+        }
+        let divPixelSizeStyle = AudioClipUIContainer.DIVIDER_PIXEL_SIZE.toString() + 'px';
+        if (this.dc.style.height != divPixelSizeStyle) {
+            this.dc.style.height = divPixelSizeStyle;
+        }
         this.drawDivider();
         // Virtual dimension, only width is used
         let virtualDim = new Dimension(ceBcrIntW, 0);
@@ -4975,7 +5043,10 @@ class AudioClipUIContainer extends BasicAudioCanvasLayerComponent {
             if (this._audioData) {
                 if (this._fixFitToPanel) {
                     // Set the virtual canvas width to the visible width
-                    this.ce.style.width = '100%';
+                    if (this.ce.style.width != '100%') {
+                        //console.log("set width to 100%");
+                        this.ce.style.width = '100%';
+                    }
                 }
                 else {
                     if (this._xZoom) {
@@ -5032,16 +5103,16 @@ class AudioClipUIContainer extends BasicAudioCanvasLayerComponent {
     }
 }
 AudioClipUIContainer.DIVIDER_PIXEL_SIZE = 10;
-AudioClipUIContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AudioClipUIContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AudioClipUIContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AudioClipUIContainer, selector: "app-audio", inputs: { audioData: "audioData", audioClip: "audioClip" }, outputs: { selectionEventEmitter: "selectionEventEmitter" }, host: { listeners: { "window:resize": "onResize($event)", "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["divider"], descendants: true, static: true }, { propertyName: "ceRef", first: true, predicate: ["virtualCanvas"], descendants: true, static: true }, { propertyName: "as", first: true, predicate: AudioSignal, descendants: true, static: true }, { propertyName: "so", first: true, predicate: Sonagram, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+AudioClipUIContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioClipUIContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AudioClipUIContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: AudioClipUIContainer, selector: "app-audio", inputs: { audioData: "audioData", audioClip: "audioClip" }, outputs: { selectionEventEmitter: "selectionEventEmitter" }, host: { listeners: { "window:resize": "onResize($event)", "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["divider"], descendants: true, static: true }, { propertyName: "ceRef", first: true, predicate: ["virtualCanvas"], descendants: true, static: true }, { propertyName: "as", first: true, predicate: AudioSignal, descendants: true, static: true }, { propertyName: "so", first: true, predicate: Sonagram, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <div #virtualCanvas>
     <canvas #divider (mousedown)="mousedown($event)" (mouseover)="mouseover($event)"
             (mouseleave)="mouseleave($event)" height="10"></canvas>
     <audio-signal [pointerPosition]="pointer" [selecting]="selecting" [selection]="selection" (pointerPositionEventEmitter)="pointerPositionChanged($event)" (selectingEventEmitter)="selectingChanged($event)" (selectedEventEmitter)="selectionChanged($event)"></audio-signal>
     <audio-sonagram [pointerPosition]="pointer" [selecting]="selecting" [selection]="selection" (pointerPositionEventEmitter)="pointerPositionChanged($event)" (selectingEventEmitter)="selectingChanged($event)" (selectedEventEmitter)="selectionChanged($event)"></audio-sonagram>
     </div>
-  `, isInline: true, styles: ["div {\n\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    position: relative; /* TODO container div position must not be 'static' (default) to act as reference for the canvases */\n    box-sizing: border-box;\n    transform: none;\n  }", "canvas{\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    cursor: ns-resize;\n    position: absolute;\n    zIndex: 1;\n    transform: none;\n  }", "audio-signal {\n    top: 0;\n    left: 0;\n    position: absolute;\n    zIndex: 1;\n    transform: none;\n  }", "audio-sonagram {\n    top: 0;\n    left: 0;\n    position: absolute;\n    zIndex: 1;\n    transform: none;\n  }"], components: [{ type: AudioSignal, selector: "audio-signal" }, { type: Sonagram, selector: "audio-sonagram" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AudioClipUIContainer, decorators: [{
+  `, isInline: true, styles: ["div{margin:0;padding:0;top:0;left:0;width:100%;height:100%;position:relative;box-sizing:border-box;transform:none;overflow:hidden}\n", "canvas{top:0;left:0;width:0;height:0;cursor:ns-resize;position:absolute;zIndex:1;transform:none}\n", "audio-signal{top:0;left:0;position:absolute;zIndex:1;transform:none}\n", "audio-sonagram{top:0;left:0;position:absolute;zIndex:1;transform:none}\n"], components: [{ type: AudioSignal, selector: "audio-signal" }, { type: Sonagram, selector: "audio-sonagram" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioClipUIContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-audio',
@@ -5064,6 +5135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
     position: relative; /* TODO container div position must not be 'static' (default) to act as reference for the canvases */
     box-sizing: border-box;
     transform: none;
+    overflow: hidden;
   }`, `canvas{
     top: 0;
     left: 0;
@@ -5226,13 +5298,13 @@ class AudioDisplayScrollPane {
         this.ac.playFramePosition = framePos;
     }
 }
-AudioDisplayScrollPane.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AudioDisplayScrollPane, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AudioDisplayScrollPane.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: { audioClip: "audioClip" }, outputs: { zoomInAction: "zoomInAction", zoomOutAction: "zoomOutAction", zoomSelectedAction: "zoomSelectedAction", zoomFitToPanelAction: "zoomFitToPanelAction" }, host: { listeners: { "scroll": "onScroll($event)", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "ac", first: true, predicate: AudioClipUIContainer, descendants: true, static: true }], ngImport: i0, template: `
+AudioDisplayScrollPane.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioDisplayScrollPane, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AudioDisplayScrollPane.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: { audioClip: "audioClip" }, outputs: { zoomInAction: "zoomInAction", zoomOutAction: "zoomOutAction", zoomSelectedAction: "zoomSelectedAction", zoomFitToPanelAction: "zoomFitToPanelAction" }, host: { listeners: { "scroll": "onScroll($event)", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "ac", first: true, predicate: AudioClipUIContainer, descendants: true, static: true }], ngImport: i0, template: `
 
     <app-audio #audioSignalContainer (selectionEventEmitter)="selectionChanged($event)"></app-audio>
 
-  `, isInline: true, styles: [":host {\n      flex: 2;\n      width: 100%;\n      background: darkgray;\n      box-sizing: border-box;\n      height: 100%;\n      position: relative;\n      overflow-x: scroll;\n      overflow-y: auto;\n    }", "app-audio {\n\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    /*position: absolute;*/\n    box-sizing: border-box;\n  }"], components: [{ type: AudioClipUIContainer, selector: "app-audio", inputs: ["audioData", "audioClip"], outputs: ["selectionEventEmitter"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AudioDisplayScrollPane, decorators: [{
+  `, isInline: true, styles: [":host{flex:2;width:100%;background:darkgray;box-sizing:border-box;height:100%;position:relative;overflow-x:scroll;overflow-y:auto}\n", "app-audio{margin:0;padding:0;top:0;left:0;width:100%;height:100%;box-sizing:border-box}\n"], components: [{ type: AudioClipUIContainer, selector: "app-audio", inputs: ["audioData", "audioClip"], outputs: ["selectionEventEmitter"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioDisplayScrollPane, decorators: [{
             type: Component,
             args: [{
                     selector: 'audio-display-scroll-pane',
@@ -5319,8 +5391,8 @@ class AudioDisplayControl {
         this.status = 'ERROR';
     }
 }
-AudioDisplayControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AudioDisplayControl, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AudioDisplayControl.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AudioDisplayControl, selector: "audio-display-control", inputs: { audioClip: "audioClip", playStartAction: "playStartAction", playSelectionAction: "playSelectionAction", playStopAction: "playStopAction", zoomInAction: "zoomInAction", zoomOutAction: "zoomOutAction", zoomFitToPanelAction: "zoomFitToPanelAction", zoomSelectedAction: "zoomSelectedAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction" }, viewQueries: [{ propertyName: "autoplaySelectedCheckbox", first: true, predicate: MatCheckbox, descendants: true, static: true }], ngImport: i0, template: `
+AudioDisplayControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioDisplayControl, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AudioDisplayControl.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: AudioDisplayControl, selector: "audio-display-control", inputs: { audioClip: "audioClip", playStartAction: "playStartAction", playSelectionAction: "playSelectionAction", playStopAction: "playStopAction", zoomInAction: "zoomInAction", zoomOutAction: "zoomOutAction", zoomFitToPanelAction: "zoomFitToPanelAction", zoomSelectedAction: "zoomSelectedAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction" }, viewQueries: [{ propertyName: "autoplaySelectedCheckbox", first: true, predicate: MatCheckbox, descendants: true, static: true }], ngImport: i0, template: `
         <div #controlPanel style="display:flex;flex-direction: row;">
             <fieldset>
 
@@ -5363,8 +5435,8 @@ AudioDisplayControl.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </button>
 
             </fieldset>
-        </div>`, isInline: true, styles: [":host {\n        flex: 0;\n\n      }"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AudioDisplayControl, decorators: [{
+        </div>`, isInline: true, styles: [":host{flex:0}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioDisplayControl, decorators: [{
             type: Component,
             args: [{
                     selector: 'audio-display-control',
@@ -5506,8 +5578,8 @@ class AudioDisplay {
         this.status = 'ERROR';
     }
 }
-AudioDisplay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AudioDisplay, deps: [{ token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AudioDisplay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AudioDisplay, selector: "app-audiodisplay", inputs: { playStartAction: "playStartAction", playStopAction: "playStopAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", audioData: "audioData", audioClip: "audioClip" }, viewQueries: [{ propertyName: "audioDisplayScrollPane", first: true, predicate: AudioDisplayScrollPane, descendants: true, static: true }], ngImport: i0, template: `
+AudioDisplay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioDisplay, deps: [{ token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AudioDisplay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: AudioDisplay, selector: "app-audiodisplay", inputs: { playStartAction: "playStartAction", playStopAction: "playStopAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", audioData: "audioData", audioClip: "audioClip" }, viewQueries: [{ propertyName: "audioDisplayScrollPane", first: true, predicate: AudioDisplayScrollPane, descendants: true, static: true }], ngImport: i0, template: `
 
     <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>
 
@@ -5520,8 +5592,8 @@ AudioDisplay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
     [zoomOutAction]="zoomOutAction"
     [zoomSelectedAction]="zoomSelectedAction"
     [zoomFitToPanelAction]="zoomFitToPanelAction"></audio-display-control>
-  `, isInline: true, styles: [":host {\n      display: flex;\n      flex-direction: column;\n      position: absolute;\n      bottom: 0px;\n      height: 100%;\n      width: 100%;\n      overflow: hidden;\n      padding: 20px;\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: rgba(230, 230, 230, 1.0)\n    }", "\n          legend{\n              margin-left: 1em; padding: 0.2em 0.8em;font-size: 0.8em;\n      }", "\n        fieldset{\n            border: 1px darkgray solid\n      }\n      "], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AudioDisplay, decorators: [{
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;position:absolute;bottom:0px;height:100%;width:100%;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#e6e6e6}\n", "legend{margin-left:1em;padding:.2em .8em;font-size:.8em}\n", "fieldset{border:1px darkgray solid}\n"], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioDisplay, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-audiodisplay',
@@ -5589,9 +5661,9 @@ class ScrollIntoViewDirective {
         }
     }
 }
-ScrollIntoViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ScrollIntoViewDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ScrollIntoViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: ScrollIntoViewDirective, selector: "[scrollIntoViewToBottom]", inputs: { scrollIntoViewToBottom: "scrollIntoViewToBottom" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ScrollIntoViewDirective, decorators: [{
+ScrollIntoViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ScrollIntoViewDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ScrollIntoViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: ScrollIntoViewDirective, selector: "[scrollIntoViewToBottom]", inputs: { scrollIntoViewToBottom: "scrollIntoViewToBottom" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ScrollIntoViewDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[scrollIntoViewToBottom]"
@@ -5625,8 +5697,8 @@ class Progress {
         }
     }
 }
-Progress.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: Progress, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Progress.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: Progress, selector: "app-sprprogress", inputs: { items: "items", selectedItemIdx: "selectedItemIdx", enableDownload: "enableDownload" }, outputs: { onRowSelect: "onRowSelect", rowSelect: "rowSelect", onShowDoneAction: "onShowDoneAction", clickDone: "clickDone", onDownloadDoneAction: "onDownloadDoneAction", clickDownloadDone: "clickDownloadDone" }, ngImport: i0, template: `
+Progress.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: Progress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+Progress.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: Progress, selector: "app-sprprogress", inputs: { items: "items", selectedItemIdx: "selectedItemIdx", enableDownload: "enableDownload" }, outputs: { onRowSelect: "onRowSelect", rowSelect: "rowSelect", onShowDoneAction: "onShowDoneAction", clickDone: "clickDone", onDownloadDoneAction: "onDownloadDoneAction", clickDownloadDone: "clickDownloadDone" }, ngImport: i0, template: `
 
     <table class="mat-typography">
       <thead>
@@ -5653,8 +5725,8 @@ Progress.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.
 
       </tbody>
     </table>
-  `, isInline: true, styles: [":host {\n    overflow-x: hidden;\n    overflow-y: scroll;\n    padding: 10pt;\n    /*flex: 0.1 0 300px;  \n      min-width: 300px; */\n    flex: 0.1 0 content;\n    background: white;\n    /* Workaround for Firefox\n    If the progress table gets long (script with many items) FF increases the height of the overflow progressContainer and\n    the whole app does not fit into the page anymore. The app overflows and shows a vertical scrollbar for the whole app.\n    See http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox\n    */\n    /* min-height:0px; */\n    min-height: 1px;\n  }", "table {\n      min-height: 1px;\n      border-collapse: collapse;\n          /* Tables do not have a natural min size */\n          /*min-width: 300px; */\n      \n    }\n\n    table, th, td {\n      border: 1px solid lightgrey;\n      padding: 0.5em;\n     \n    }\n\n    ", "\n      .selRow {\n        background: lightblue;\n      }\n    ", ".promptDescriptor{\n      \n      max-width: 200px;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n    }"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ScrollIntoViewDirective, selector: "[scrollIntoViewToBottom]", inputs: ["scrollIntoViewToBottom"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: Progress, decorators: [{
+  `, isInline: true, styles: [":host{overflow-x:hidden;overflow-y:scroll;padding:10pt;flex:.1 0 content;background:white;min-height:1px}\n", "table{min-height:1px;border-collapse:collapse}table,th,td{border:1px solid lightgrey;padding:.5em}\n", ".selRow{background:lightblue}\n", ".promptDescriptor{max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ScrollIntoViewDirective, selector: "[scrollIntoViewToBottom]", inputs: ["scrollIntoViewToBottom"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: Progress, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sprprogress',
@@ -5760,12 +5832,12 @@ class Recinstructions {
         return riTxt;
     }
 }
-Recinstructions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: Recinstructions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Recinstructions.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: Recinstructions, selector: "spr-recinstructions", inputs: { recinstructions: "recinstructions", selectedItemIdx: "selectedItemIdx", itemCount: "itemCount" }, ngImport: i0, template: `
+Recinstructions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: Recinstructions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+Recinstructions.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: Recinstructions, selector: "spr-recinstructions", inputs: { recinstructions: "recinstructions", selectedItemIdx: "selectedItemIdx", itemCount: "itemCount" }, ngImport: i0, template: `
 
     {{displayText()}}
-  `, isInline: true, styles: [":host {\n\n    justify-content: left; /* align horizontal center */\n    align-items: flex-start; /* align vertical  center */\n    background: white;\n    text-align: left;\n    font-size: 1em;\n    flex: 0;\n    width: 100%;\n  }\n  "] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: Recinstructions, decorators: [{
+  `, isInline: true, styles: [":host{justify-content:left;align-items:flex-start;background:white;text-align:left;font-size:1em;flex:0;width:100%}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: Recinstructions, decorators: [{
             type: Component,
             args: [{
                     selector: 'spr-recinstructions',
@@ -5953,13 +6025,13 @@ class Prompter {
         }
     }
 }
-Prompter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: Prompter, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ProjectService }], target: i0.ɵɵFactoryTarget.Component });
-Prompter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: Prompter, selector: "app-sprprompter", inputs: { projectName: "projectName", prompterHeight: "prompterHeight", promptMediaItems: "promptMediaItems" }, host: { properties: { "class.fill": "this.prompterStyleFill" } }, ngImport: i0, template: `
+Prompter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: Prompter, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ProjectService }], target: i0.ɵɵFactoryTarget.Component });
+Prompter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: Prompter, selector: "app-sprprompter", inputs: { projectName: "projectName", prompterHeight: "prompterHeight", promptMediaItems: "promptMediaItems" }, host: { properties: { "class.fill": "this.prompterStyleFill" } }, ngImport: i0, template: `
 
     <!--<ng-template [ngIf]="text">{{text}}</ng-template>-->
     <!-- <img *ngIf="src" #promptImage [src]="srcUrl()" [height]="prompterHeight-20" /> -->
-  `, isInline: true, styles: [":host {\n\n    justify-content: center; /* align horizontal center */\n    align-items: center; /* align vertical  center */\n    background: white;\n    text-align: center;\n    /* font-size: 2em; */\n    line-height: 1.2em;\n    font-weight: bold;\n    /* Use only natural size of the prompt */\n    /* The prompter compnent then ets aligned vertically centered */\n    flex: 0 1;\n\n  }", ":host(.fill) {\n    /* Use all space to scale images */\n    flex: 3;\n    width: 100%;\n    height: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    /* A separate flex container might be necessayr to alighn centered */\n    vertical-align: middle; /* TODO does not work, image is not vertically centered */\n  }"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: Prompter, decorators: [{
+  `, isInline: true, styles: [":host{justify-content:center;align-items:center;background:white;text-align:center;line-height:1.2em;font-weight:700;flex:0 1}\n", ":host(.fill){flex:3;width:100%;height:100%;max-height:100%;max-width:100%;vertical-align:middle}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: Prompter, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sprprompter',
@@ -6133,11 +6205,11 @@ class PromptContainer {
         }
     }
 }
-PromptContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PromptContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PromptContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: PromptContainer, selector: "app-sprpromptcontainer", inputs: { projectName: "projectName", mediaitems: "mediaitems" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "prompter", first: true, predicate: Prompter, descendants: true, static: true }], ngImport: i0, template: `
+PromptContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: PromptContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PromptContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: PromptContainer, selector: "app-sprpromptcontainer", inputs: { projectName: "projectName", mediaitems: "mediaitems" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "prompter", first: true, predicate: Prompter, descendants: true, static: true }], ngImport: i0, template: `
     <app-sprprompter #prompter [projectName]="projectName" [promptMediaItems]="mediaitems" [style.font-size]="fontSize+'px'" [style.visibility]="prDisplay" [prompterHeight]="prompterHeight"></app-sprprompter>
-  `, isInline: true, styles: [":host {\n\n    flex: 3; /* the container consumes all available space */\n    padding: 10pt;\n    height: 100%;\n    max-height: 100%;\n\n    justify-content: center; /* align horizontal center*/\n    align-items: center; /* align vertical center */\n    background: white;\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    min-height: 0px;\n    width: 100%;\n  }\n  "], components: [{ type: Prompter, selector: "app-sprprompter", inputs: ["projectName", "prompterHeight", "promptMediaItems"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PromptContainer, decorators: [{
+  `, isInline: true, styles: [":host{flex:3;padding:10pt;height:100%;max-height:100%;justify-content:center;align-items:center;background:white;text-align:center;display:flex;flex-direction:column;min-height:0px;width:100%}\n"], components: [{ type: Prompter, selector: "app-sprprompter", inputs: ["projectName", "prompterHeight", "promptMediaItems"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: PromptContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sprpromptcontainer',
@@ -6280,15 +6352,15 @@ class PromptingContainer {
         ev.preventDefault();
     }
 }
-PromptingContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PromptingContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PromptingContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: PromptingContainer, selector: "app-sprpromptingcontainer", inputs: { projectName: "projectName", promptItem: "promptItem", showPrompt: "showPrompt", selectedItemIdx: "selectedItemIdx", itemCount: "itemCount", transportActions: "transportActions" }, host: { listeners: { "touchstart": "onTouchstart($event)", "touchend": "onTouchEnd($event)", "touchmove": "onTouchMove($event)", "touchcancel": "onTouchCancel($event)" } }, ngImport: i0, template: `
+PromptingContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: PromptingContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PromptingContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: PromptingContainer, selector: "app-sprpromptingcontainer", inputs: { projectName: "projectName", promptItem: "promptItem", showPrompt: "showPrompt", selectedItemIdx: "selectedItemIdx", itemCount: "itemCount", transportActions: "transportActions" }, host: { listeners: { "touchstart": "onTouchstart($event)", "touchend": "onTouchEnd($event)", "touchmove": "onTouchMove($event)", "touchcancel": "onTouchCancel($event)" } }, ngImport: i0, template: `
     <spr-recinstructions [selectedItemIdx]="selectedItemIdx" [itemCount]="itemCount"
                          [recinstructions]="promptItem?.recinstructions?.recinstructions"></spr-recinstructions>
     <app-sprpromptcontainer [projectName]="projectName"
                             [mediaitems]="showPrompt?(promptItem?promptItem.mediaitems:null):null"></app-sprpromptcontainer>
 
-  `, isInline: true, styles: [":host {\n    position: relative;\n    flex: 3; /* the container consumes all available space */\n    padding: 10pt;\n    justify-content: center; /* align horizontal center*/\n    align-items: center; /* align vertical center */\n    background: white;\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    min-height: 0px;\n  }\n  "], components: [{ type: Recinstructions, selector: "spr-recinstructions", inputs: ["recinstructions", "selectedItemIdx", "itemCount"] }, { type: PromptContainer, selector: "app-sprpromptcontainer", inputs: ["projectName", "mediaitems"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PromptingContainer, decorators: [{
+  `, isInline: true, styles: [":host{position:relative;flex:3;padding:10pt;justify-content:center;align-items:center;background:white;text-align:center;display:flex;flex-direction:column;min-height:0px}\n"], components: [{ type: Recinstructions, selector: "spr-recinstructions", inputs: ["recinstructions", "selectedItemIdx", "itemCount"] }, { type: PromptContainer, selector: "app-sprpromptcontainer", inputs: ["projectName", "mediaitems"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: PromptingContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sprpromptingcontainer',
@@ -6360,8 +6432,8 @@ class Prompting {
         this.onPrevItem.emit();
     }
 }
-Prompting.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: Prompting, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Prompting.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: Prompting, selector: "app-sprprompting", inputs: { projectName: "projectName", startStopSignalState: "startStopSignalState", promptItem: "promptItem", showPrompt: "showPrompt", items: "items", selectedItemIdx: "selectedItemIdx", transportActions: "transportActions", enableDownload: "enableDownload", audioSignalCollapsed: "audioSignalCollapsed", displayAudioClip: "displayAudioClip", playStartAction: "playStartAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", playStopAction: "playStopAction" }, outputs: { onItemSelect: "onItemSelect", onNextItem: "onNextItem", onPrevItem: "onPrevItem" }, viewQueries: [{ propertyName: "simpleTrafficLight", first: true, predicate: SimpleTrafficLight, descendants: true, static: true }, { propertyName: "audioDisplay", first: true, predicate: AudioDisplay, descendants: true, static: true }], ngImport: i0, template: `
+Prompting.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: Prompting, deps: [], target: i0.ɵɵFactoryTarget.Component });
+Prompting.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: Prompting, selector: "app-sprprompting", inputs: { projectName: "projectName", startStopSignalState: "startStopSignalState", promptItem: "promptItem", showPrompt: "showPrompt", items: "items", selectedItemIdx: "selectedItemIdx", transportActions: "transportActions", enableDownload: "enableDownload", audioSignalCollapsed: "audioSignalCollapsed", displayAudioClip: "displayAudioClip", playStartAction: "playStartAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", playStopAction: "playStopAction" }, outputs: { onItemSelect: "onItemSelect", onNextItem: "onNextItem", onPrevItem: "onPrevItem" }, viewQueries: [{ propertyName: "simpleTrafficLight", first: true, predicate: SimpleTrafficLight, descendants: true, static: true }, { propertyName: "audioDisplay", first: true, predicate: AudioDisplay, descendants: true, static: true }], ngImport: i0, template: `
 
     <app-simpletrafficlight [status]="startStopSignalState"></app-simpletrafficlight>
     <app-sprpromptingcontainer [projectName]="projectName" [promptItem]="promptItem" [showPrompt]="showPrompt"
@@ -6383,8 +6455,8 @@ Prompting.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12
 
 
 
-  `, isInline: true, styles: [":host {\n    position: relative;\n    margin: 0;\n    padding: 0;\n    background: lightgrey;\n    width: 100%; /* use all horizontal available space */\n    flex: 1; /* ... and fill rest of vertical available space (other components have flex 0) */\n\n    /* Workaround for Firefox\n    If the progress table gets long (script with many items) FF increases the height of the overflow progressContainer and\n    the whole app does not fit into the page anymore. The app overflows and shows a vertical scrollbar for the whole app.\n    See http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox\n    */\n    min-height: 0px;\n\n    display: flex; /* flex container: left traffic light, right prompter (container) */\n    flex-direction: row;\n    flex-wrap: nowrap; /* wrap could completely destroy the layout */\n  }", "\n    app-simpletrafficlight {\n      margin: 10px;\n      min-height: 0px;\n      z-index: 3;\n    }\n  ", "\n    app-sprprogress {\n      z-index: 3;\n    }\n  ", "\n    div {\n      display: none;\n      position: absolute;\n\n\n      /* height: 50%; */\n      /* width: 100%; */\n\n      /* overflow: hidden; */\n\n      /* margin: 20px; */\n      /* border: 20px; */\n      z-index: 5;\n      /*background-color: red; */\n    }", "\n    div.active {\n      display: flex;\n      position: absolute;\n      bottom: 0px;\n      /*left: 0px; */\n\n      height: 90%;\n      width: 100%;\n\n      overflow: hidden;\n\n      padding: 0px;\n      /* margin: 20px; */\n      /* border: 20px; */\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: rgba(0, 0, 0, 0)\n\n    }"], components: [{ type: SimpleTrafficLight, selector: "app-simpletrafficlight", inputs: ["status"] }, { type: PromptingContainer, selector: "app-sprpromptingcontainer", inputs: ["projectName", "promptItem", "showPrompt", "selectedItemIdx", "itemCount", "transportActions"] }, { type: Progress, selector: "app-sprprogress", inputs: ["items", "selectedItemIdx", "enableDownload"], outputs: ["onRowSelect", "rowSelect", "onShowDoneAction", "clickDone", "onDownloadDoneAction", "clickDownloadDone"] }, { type: AudioDisplay, selector: "app-audiodisplay", inputs: ["playStartAction", "playStopAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "audioData", "audioClip"] }], directives: [{ 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: "12.2.13", ngImport: i0, type: Prompting, decorators: [{
+  `, isInline: true, styles: [":host{position:relative;margin:0;padding:0;background:lightgrey;width:100%;flex:1;min-height:0px;display:flex;flex-direction:row;flex-wrap:nowrap}\n", "app-simpletrafficlight{margin:10px;min-height:0px;z-index:3}\n", "app-sprprogress{z-index:3}\n", "div{display:none;position:absolute;z-index:5}\n", "div.active{display:flex;position:absolute;bottom:0px;height:90%;width:100%;overflow:hidden;padding:0;z-index:5;box-sizing:border-box;background-color:#0000}\n"], components: [{ type: SimpleTrafficLight, selector: "app-simpletrafficlight", inputs: ["status"] }, { type: PromptingContainer, selector: "app-sprpromptingcontainer", inputs: ["projectName", "promptItem", "showPrompt", "selectedItemIdx", "itemCount", "transportActions"] }, { type: Progress, selector: "app-sprprogress", inputs: ["items", "selectedItemIdx", "enableDownload"], outputs: ["onRowSelect", "rowSelect", "onShowDoneAction", "clickDone", "onDownloadDoneAction", "clickDownloadDone"] }, { type: AudioDisplay, selector: "app-audiodisplay", inputs: ["playStartAction", "playStopAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "audioData", "audioClip"] }], directives: [{ 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.2.1", ngImport: i0, type: Prompting, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sprprompting',
@@ -6617,14 +6689,14 @@ class StatusDisplay {
         this.statusWaiting = false;
     }
 }
-StatusDisplay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: StatusDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StatusDisplay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: { statusAlertType: "statusAlertType", statusMsg: "statusMsg", statusWaiting: "statusWaiting" }, ngImport: i0, template: `
+StatusDisplay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: StatusDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StatusDisplay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: { statusAlertType: "statusAlertType", statusMsg: "statusMsg", statusWaiting: "statusWaiting" }, ngImport: i0, template: `
     <p matTooltip="Status">
       <mat-progress-spinner *ngIf="statusWaiting" color="black"  mode="indeterminate" [diameter]="30" [strokeWidth]="5"></mat-progress-spinner><mat-icon *ngIf="statusAlertType==='error'" style="color:red">report_problem</mat-icon>
       {{statusMsg}}
     </p>
-  `, isInline: true, styles: [":host {\n    display: inline;\n    text-align: left;\n    font-size: smaller;\n  }", "\n    p {\n      padding: 4px;\n      white-space:nowrap;\n      display: inline-block;\n    }\n  ", "\n    mat-progress-spinner {\n      color: black;\n      display: inline-block;\n    }\n  ", "\n    span {\n      color: red;\n    }\n  "], components: [{ type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "mode", "diameter", "strokeWidth", "value"], exportAs: ["matProgressSpinner"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: StatusDisplay, decorators: [{
+  `, isInline: true, styles: [":host{display:inline;text-align:left;font-size:smaller}\n", "p{padding:4px;white-space:nowrap;display:inline-block}\n", "mat-progress-spinner{color:#000;display:inline-block}\n", "span{color:red}\n"], components: [{ type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: StatusDisplay, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sprstatusdisplay',
@@ -6709,11 +6781,11 @@ class UploadStatus {
         return this._status;
     }
 }
-UploadStatus.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: UploadStatus, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UploadStatus.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: UploadStatus, selector: "app-uploadstatus", inputs: { value: "value", awaitNewUpload: "awaitNewUpload", status: "status" }, ngImport: i0, template: `
+UploadStatus.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: UploadStatus, deps: [], target: i0.ɵɵFactoryTarget.Component });
+UploadStatus.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: UploadStatus, selector: "app-uploadstatus", inputs: { value: "value", awaitNewUpload: "awaitNewUpload", status: "status" }, ngImport: i0, template: `
     <mat-progress-spinner [mode]="spinnerMode" [color]="status" [diameter]="30" [strokeWidth]="5" [value]="_value" [matTooltip]="toolTipText"></mat-progress-spinner>
-  `, isInline: true, styles: [":host {\n    flex: 1;\n  /* align-self: flex-start; */\n    /*display: inline; */\n    text-align: left;\n  }", "mat-progress-spinner{\n      display: inline-block;\n  }"], components: [{ type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "mode", "diameter", "strokeWidth", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: UploadStatus, decorators: [{
+  `, isInline: true, styles: [":host{flex:1;text-align:left}\n", "mat-progress-spinner{display:inline-block}\n"], components: [{ type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: UploadStatus, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-uploadstatus',
@@ -6741,11 +6813,11 @@ class ProgressDisplay {
         this.progressMsg = '[itemcode]';
     }
 }
-ProgressDisplay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ProgressDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressDisplay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ProgressDisplay, selector: "app-sprprogressdisplay", ngImport: i0, template: `
+ProgressDisplay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ProgressDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressDisplay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: ProgressDisplay, selector: "app-sprprogressdisplay", ngImport: i0, template: `
     <p>{{progressMsg}}</p>
-  `, isInline: true, styles: [":host {\n    flex: 1;\n  /* align-self: flex-start; */\n    /*display: inline; */\n      width: 100%;\n    text-align: left;\n  }"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ProgressDisplay, decorators: [{
+  `, isInline: true, styles: [":host{flex:1;width:100%;text-align:left}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ProgressDisplay, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sprprogressdisplay',
@@ -6775,6 +6847,7 @@ class TransportActions {
 class TransportPanel {
     constructor() {
         this.navigationEnabled = true;
+        this.pausingEnabled = true;
     }
     startDisabled() {
         return !this.actions || this.readonly || this.actions.startAction.disabled;
@@ -6786,7 +6859,7 @@ class TransportPanel {
         return !this.actions || this.actions.nextAction.disabled || !this.navigationEnabled;
     }
     pauseDisabled() {
-        return !this.actions || this.actions.pauseAction.disabled;
+        return !this.actions || this.actions.pauseAction.disabled || !this.pausingEnabled;
     }
     fwdDisabled() {
         return !this.actions || this.actions.fwdAction.disabled || !this.navigationEnabled;
@@ -6844,8 +6917,8 @@ class TransportPanel {
         }
     }
 }
-TransportPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TransportPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TransportPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: TransportPanel, selector: "app-sprtransport", inputs: { readonly: "readonly", actions: "actions", navigationEnabled: "navigationEnabled" }, ngImport: i0, template: `
+TransportPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TransportPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TransportPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: TransportPanel, selector: "app-sprtransport", inputs: { readonly: "readonly", actions: "actions", navigationEnabled: "navigationEnabled", pausingEnabled: "pausingEnabled" }, ngImport: i0, template: `
     <button id="bwdBtn" *ngIf="navigationEnabled"  (click)="actions.bwdAction.perform()" [disabled]="bwdDisabled()"
             mat-raised-button>
       <mat-icon>chevron_left</mat-icon>
@@ -6854,7 +6927,7 @@ TransportPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
       <mat-icon [style.color]="startStopNextIconColor()">{{startStopNextIconName()}}</mat-icon><mat-icon *ngIf="!nextDisabled()" [style.color]="nextDisabled() ? 'grey' : 'black'">chevron_right</mat-icon>
       <span fxShow.xs="false">{{startStopNextName()}}</span>
     </button>
-    <button  (click)="actions.pauseAction.perform()" [disabled]="pauseDisabled()" mat-raised-button>
+    <button *ngIf="pausingEnabled" (click)="actions.pauseAction.perform()" [disabled]="pauseDisabled()" mat-raised-button>
       <mat-icon>pause</mat-icon>
       <span fxShow.xs="false">Pause</span>
     </button>
@@ -6865,8 +6938,8 @@ TransportPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
       <mat-icon>chevron_right</mat-icon>
     </button>
 
-  `, isInline: true, styles: [":host {\n    flex: 20;\n    align-self: center;\n    width: 100%;\n    text-align: center;\n    align-content: center;\n    margin: 0;\n\n  }", "\n    div {\n      display: inline;\n      flex: 0;\n    }"], components: [{ 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: 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: "12.2.13", ngImport: i0, type: TransportPanel, decorators: [{
+  `, isInline: true, styles: [":host{flex:20;align-self:center;width:100%;text-align:center;align-content:center;margin:0}\n", "div{display:inline;flex:0}\n"], components: [{ 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: 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.2.1", ngImport: i0, type: TransportPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sprtransport',
@@ -6879,7 +6952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
       <mat-icon [style.color]="startStopNextIconColor()">{{startStopNextIconName()}}</mat-icon><mat-icon *ngIf="!nextDisabled()" [style.color]="nextDisabled() ? 'grey' : 'black'">chevron_right</mat-icon>
       <span fxShow.xs="false">{{startStopNextName()}}</span>
     </button>
-    <button  (click)="actions.pauseAction.perform()" [disabled]="pauseDisabled()" mat-raised-button>
+    <button *ngIf="pausingEnabled" (click)="actions.pauseAction.perform()" [disabled]="pauseDisabled()" mat-raised-button>
       <mat-icon>pause</mat-icon>
       <span fxShow.xs="false">Pause</span>
     </button>
@@ -6912,6 +6985,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                 type: Input
             }], navigationEnabled: [{
                 type: Input
+            }], pausingEnabled: [{
+                type: Input
             }] } });
 class ReadyStateIndicator {
     constructor() {
@@ -6928,11 +7003,11 @@ class ReadyStateIndicator {
         return this._ready;
     }
 }
-ReadyStateIndicator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ReadyStateIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ReadyStateIndicator.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: { ready: "ready" }, ngImport: i0, template: `
+ReadyStateIndicator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ReadyStateIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ReadyStateIndicator.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: { ready: "ready" }, ngImport: i0, template: `
         <mat-icon [matTooltip]="readyStateToolTip">{{hourGlassIconName}}</mat-icon>
   `, isInline: true, components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ReadyStateIndicator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ReadyStateIndicator, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-readystateindicator',
@@ -6958,8 +7033,8 @@ class ControlPanel {
         return this._ready;
     }
 }
-ControlPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ControlPanel, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-ControlPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ControlPanel, selector: "app-sprcontrolpanel", inputs: { readonly: "readonly", transportActions: "transportActions", processing: "processing", statusMsg: "statusMsg", statusAlertType: "statusAlertType", statusWaiting: "statusWaiting", uploadStatus: "uploadStatus", uploadProgress: "uploadProgress", currentRecording: "currentRecording", enableUploadRecordings: "enableUploadRecordings", navigationEnabled: "navigationEnabled", ready: "ready" }, viewQueries: [{ propertyName: "statusDisplay", first: true, predicate: StatusDisplay, descendants: true, static: true }, { propertyName: "transportPanel", first: true, predicate: TransportPanel, descendants: true, static: true }], ngImport: i0, template: `
+ControlPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ControlPanel, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+ControlPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: ControlPanel, selector: "app-sprcontrolpanel", inputs: { readonly: "readonly", transportActions: "transportActions", processing: "processing", statusMsg: "statusMsg", statusAlertType: "statusAlertType", statusWaiting: "statusWaiting", uploadStatus: "uploadStatus", uploadProgress: "uploadProgress", currentRecording: "currentRecording", enableUploadRecordings: "enableUploadRecordings", navigationEnabled: "navigationEnabled", ready: "ready" }, viewQueries: [{ propertyName: "statusDisplay", first: true, predicate: StatusDisplay, descendants: true, static: true }, { propertyName: "transportPanel", first: true, predicate: TransportPanel, descendants: true, static: true }], ngImport: i0, template: `
     <div fxHide.xs  fxLayout="row" >
      <app-sprstatusdisplay fxFlex="0 0 0" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"
                           class="hidden-xs"></app-sprstatusdisplay>
@@ -6979,8 +7054,8 @@ ControlPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
       <app-sprtransport [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="navigationEnabled"></app-sprtransport>
 
     </div>
-  `, isInline: true, styles: ["div {\n    align-content: center;\n    align-items: center;\n    margin: 0;\n    padding: 20px;\n    min-height: min-content; /* important */\n  }"], components: [{ type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { type: TransportPanel, selector: "app-sprtransport", inputs: ["readonly", "actions", "navigationEnabled"] }, { type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }], directives: [{ 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"] }, { 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: 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: i8.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i8.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ControlPanel, decorators: [{
+  `, isInline: true, styles: ["div{align-content:center;align-items:center;margin:0;padding:20px;min-height:-webkit-min-content;min-height:min-content}\n"], components: [{ type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { type: TransportPanel, selector: "app-sprtransport", inputs: ["readonly", "actions", "navigationEnabled", "pausingEnabled"] }, { type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }], directives: [{ 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"] }, { 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: 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: i8.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i8.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ControlPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sprcontrolpanel',
@@ -7054,8 +7129,8 @@ class SessionFinishedDialog {
         this.dialogRef.close();
     }
 }
-SessionFinishedDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SessionFinishedDialog, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-SessionFinishedDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SessionFinishedDialog, selector: "spr-session-finished-dialog", ngImport: i0, template: `<h1 mat-dialog-title><mat-icon [style.color]="'green'">done_all</mat-icon> Session finished</h1>
+SessionFinishedDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SessionFinishedDialog, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+SessionFinishedDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: SessionFinishedDialog, selector: "spr-session-finished-dialog", ngImport: i0, template: `<h1 mat-dialog-title><mat-icon [style.color]="'green'">done_all</mat-icon> Session finished</h1>
   <div mat-dialog-content>
 
     <p>Thank you! The recording session is complete.</p>
@@ -7065,7 +7140,7 @@ SessionFinishedDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
     <button mat-button (click)="closeDialog()">OK</button>
   </div>
   `, isInline: true, components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SessionFinishedDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SessionFinishedDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'spr-session-finished-dialog',
@@ -7094,8 +7169,8 @@ class MessageDialog {
         this.dialogRef.close();
     }
 }
-MessageDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: MessageDialog, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-MessageDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: MessageDialog, selector: "msg-dialog", ngImport: i0, template: `<h1 mat-dialog-title><mat-icon *ngIf="data.type==='error'" [style.color]="'red'">error</mat-icon>
+MessageDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MessageDialog, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+MessageDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: MessageDialog, selector: "msg-dialog", ngImport: i0, template: `<h1 mat-dialog-title><mat-icon *ngIf="data.type==='error'" [style.color]="'red'">error</mat-icon>
     <mat-icon *ngIf="data.type==='warning'" [style.color]="'yellow'">warning</mat-icon>{{data.title}}</h1>
   <div mat-dialog-content>
 
@@ -7107,7 +7182,7 @@ MessageDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
     <button mat-button (click)="closeDialog()">OK</button>
   </div>
   `, isInline: true, components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: MessageDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MessageDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'msg-dialog',
@@ -7146,7 +7221,7 @@ class AudioContextProvider {
 }
 AudioContextProvider._audioContext = null;
 
-class Item {
+class Item$1 {
     constructor(_promptAsString, _training, _recording) {
         this._promptAsString = _promptAsString;
         this._training = _training;
@@ -7186,15 +7261,26 @@ class RecordingService {
             this.withCredentials = config.withCredentials;
         }
     }
-    recFilesUrl(projectName, sessId) {
+    recordingFilesUrl() {
+        let recFilesUrl = this.apiEndPoint + RecordingService.RECORDING_API_CTX;
+        return recFilesUrl;
+    }
+    sessionRecordingFilesUrl(projectName, sessId) {
+        let encPrjName = encodeURIComponent(projectName);
+        let encSessId = encodeURIComponent(sessId);
+        let recFilesUrl = this.apiEndPoint + ProjectService.PROJECT_API_CTX + '/' + encPrjName + '/' +
+            SessionService.SESSION_API_CTX + '/' + encSessId + '/' + RecordingService.RECORDING_API_CTX;
+        return recFilesUrl;
+    }
+    sessionRecFilesUrl(projectName, sessId) {
         let encPrjName = encodeURIComponent(projectName);
         let encSessId = encodeURIComponent(sessId);
         let recFilesUrl = this.apiEndPoint + ProjectService.PROJECT_API_CTX + '/' + encPrjName + '/' +
             SessionService.SESSION_API_CTX + '/' + encSessId + '/' + RecordingService.REC_API_CTX;
         return recFilesUrl;
     }
-    recFilesReqUrl(projectName, sessId) {
-        let recFilesUrl = this.recFilesUrl(projectName, sessId);
+    sessionRecFilesReqUrl(projectName, sessId) {
+        let recFilesUrl = this.sessionRecFilesUrl(projectName, sessId);
         if (this.config && this.config.apiType === ApiType.FILES) {
             // for development and demo
             // append UUID to make request URL unique to avoid localhost server caching
@@ -7203,37 +7289,98 @@ class RecordingService {
         return recFilesUrl;
     }
     recordingFileDescrList(projectName, sessId) {
-        let recFilesReqUrl = this.recFilesReqUrl(projectName, sessId);
+        let recFilesReqUrl = this.sessionRecFilesReqUrl(projectName, sessId);
         let wobs = this.http.get(recFilesReqUrl, { withCredentials: this.withCredentials });
         return wobs;
     }
     recordingFileList(projectName, sessId) {
-        let recFilesReqUrl = this.recFilesReqUrl(projectName, sessId);
+        let recFilesReqUrl = this.sessionRecFilesReqUrl(projectName, sessId);
         let wobs = this.http.get(recFilesReqUrl, { withCredentials: this.withCredentials });
         return wobs;
     }
-    fetchAudiofile(projectName, sessId, itemcode, version) {
-        let recFilesUrl = this.recFilesUrl(projectName, sessId);
-        let encItemcode = encodeURIComponent(itemcode);
-        let recUrl = recFilesUrl + '/' + encItemcode + '/' + version;
+    sprRecordingFileList(projectName, sessId) {
+        let recFilesReqUrl = this.sessionRecFilesReqUrl(projectName, sessId);
+        let wobs = this.http.get(recFilesReqUrl, { withCredentials: this.withCredentials });
+        return wobs;
+    }
+    audioRequest(audioUrl) {
         if (this.config && this.config.apiType === ApiType.FILES) {
             // for development and demo
             // append UUID to make request URL unique to avoid localhost server caching
-            recUrl = recUrl + '.wav?requestUUID=' + UUID.generate();
+            audioUrl = audioUrl + '.wav?requestUUID=' + UUID.generate();
         }
         let headers = new HttpHeaders();
         headers = headers.set('Accept', 'audio/wav');
-        return this.http.get(recUrl, {
+        return this.http.get(audioUrl, {
             headers: headers,
             observe: 'response',
             responseType: 'arraybuffer',
             withCredentials: this.withCredentials
         });
     }
+    fetchAudiofile(projectName, sessId, recFileId) {
+        let recFilesUrl = this.sessionRecordingFilesUrl(projectName, sessId);
+        let encRecFileId = encodeURIComponent(recFileId);
+        let recUrl = recFilesUrl + '/' + encRecFileId;
+        return this.audioRequest(recUrl);
+    }
+    fetchSprAudiofile(projectName, sessId, itemcode, version) {
+        let recFilesUrl = this.sessionRecFilesUrl(projectName, sessId);
+        let encItemcode = encodeURIComponent(itemcode);
+        let recUrl = recFilesUrl + '/' + encItemcode + '/' + version;
+        return this.audioRequest(recUrl);
+    }
     fetchAndApplyRecordingFile(aCtx, projectName, recordingFile) {
+        let wobs = new Observable(observer => {
+            if (recordingFile.session && recordingFile.recordingFileId) {
+                let obs = this.fetchAudiofile(projectName, recordingFile.session, recordingFile.recordingFileId);
+                obs.subscribe(resp => {
+                    //console.log("Fetched audio file. HTTP response status: "+resp.status+", type: "+resp.type+", byte length: "+ resp.body.byteLength);
+                    // Do not use Promise version, which does not work with Safari 13 (13.0.5)
+                    if (resp.body) {
+                        aCtx.decodeAudioData(resp.body, ab => {
+                            recordingFile.audioBuffer = ab;
+                            if (this.debugDelay > 0) {
+                                window.setTimeout(() => {
+                                    observer.next(recordingFile);
+                                    observer.complete();
+                                }, this.debugDelay);
+                            }
+                            else {
+                                observer.next(recordingFile);
+                                observer.complete();
+                            }
+                        }, error => {
+                            observer.error(error);
+                            observer.complete();
+                        });
+                    }
+                    else {
+                        observer.error('Fetching audio file: response has no body');
+                    }
+                }, (error) => {
+                    if (error.status == 404) {
+                        // Interpret not as an error, the file ist not recorded yet
+                        observer.next(null);
+                        observer.complete();
+                    }
+                    else {
+                        // all other states are errors
+                        observer.error(error);
+                        observer.complete();
+                    }
+                });
+            }
+            else {
+                observer.error();
+            }
+        });
+        return wobs;
+    }
+    fetchAndApplySprRecordingFile(aCtx, projectName, recordingFile) {
         let wobs = new Observable(observer => {
             if (recordingFile.session) {
-                let obs = this.fetchAudiofile(projectName, recordingFile.session, recordingFile.itemCode, recordingFile.version);
+                let obs = this.fetchSprAudiofile(projectName, recordingFile.session, recordingFile.itemCode, recordingFile.version);
                 obs.subscribe(resp => {
                     //console.log("Fetched audio file. HTTP response status: "+resp.status+", type: "+resp.type+", byte length: "+ resp.body.byteLength);
                     // Do not use Promise version, which does not work with Safari 13 (13.0.5)
@@ -7279,12 +7426,12 @@ class RecordingService {
     }
     fetchRecordingFile(aCtx, projectName, sessId, itemcode, version) {
         let wobs = new Observable(observer => {
-            let obs = this.fetchAudiofile(projectName, sessId, itemcode, version);
+            let obs = this.fetchSprAudiofile(projectName, sessId, itemcode, version);
             obs.subscribe(resp => {
                 // Do not use Promise version, which does not work with Safari 13
                 if (resp.body) {
                     aCtx.decodeAudioData(resp.body, ab => {
-                        let rf = new RecordingFile(sessId, itemcode, version, ab);
+                        let rf = new SprRecordingFile(sessId, itemcode, version, ab);
                         if (this.debugDelay > 0) {
                             window.setTimeout(() => {
                                 observer.next(rf);
@@ -7317,9 +7464,10 @@ class RecordingService {
     }
 }
 RecordingService.REC_API_CTX = 'recfile';
-RecordingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-RecordingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingService, decorators: [{
+RecordingService.RECORDING_API_CTX = 'recordingfile';
+RecordingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+RecordingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
@@ -7333,9 +7481,9 @@ class SpeechRecorderUploader extends Uploader {
         this.config = config;
     }
 }
-SpeechRecorderUploader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SpeechRecorderUploader, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-SpeechRecorderUploader.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SpeechRecorderUploader });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SpeechRecorderUploader, decorators: [{
+SpeechRecorderUploader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SpeechRecorderUploader, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+SpeechRecorderUploader.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SpeechRecorderUploader });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SpeechRecorderUploader, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
@@ -7355,12 +7503,12 @@ class WarningBar {
         }
     }
 }
-WarningBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: WarningBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WarningBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: WarningBar, selector: "app-warningbar", inputs: { warningText: "warningText", show: "show" }, providers: [SessionService], ngImport: i0, template: `
+WarningBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: WarningBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WarningBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: WarningBar, selector: "app-warningbar", inputs: { warningText: "warningText", show: "show" }, providers: [SessionService], ngImport: i0, template: `
     <div [class]="displayClass">{{warningText}}</div>
 
-  `, isInline: true, styles: [":host {\n\n    flex: 0 0 content;\n    background: orange;\n\n  }", "\n    .off {\n      display: none;\n    }\n  ", "\n    .on {\n      padding: 2px;\n      display: inline-block;\n      width: 100%;\n      font-weight: bold;\n      font-size: larger;\n      text-align: center;\n    }\n  "] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: WarningBar, decorators: [{
+  `, isInline: true, styles: [":host{flex:0 0 content;background:orange}\n", ".off{display:none}\n", ".on{padding:2px;display:inline-block;width:100%;font-weight:700;font-size:larger;text-align:center}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: WarningBar, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-warningbar',
@@ -7396,11 +7544,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
             }] } });
 
 const FORCE_REQUEST_AUDIO_PERMISSIONS = false;
-const RECFILE_API_CTX = 'recfile';
-const MAX_RECORDING_TIME_MS = 1000 * 60 * 60 * 60; // 1 hour
+const RECFILE_API_CTX$1 = 'recfile';
+const MAX_RECORDING_TIME_MS$1 = 1000 * 60 * 60 * 60; // 1 hour
 const DEFAULT_PRE_REC_DELAY = 1000;
 const DEFAULT_POST_REC_DELAY = 500;
-const LEVEL_BAR_INTERVALL_SECONDS = 0.1; // 100ms
+const LEVEL_BAR_INTERVALL_SECONDS$1 = 0.1; // 100ms
 // TODO enum not possible in template language , use string for now
 //export enum StatusAlertType {INFO,WARN,ERROR};
 class SessionManager {
@@ -7486,7 +7634,10 @@ class SessionManager {
         }
         catch (err) {
             this.status = 8 /* ERROR */;
-            let errMsg = err.message;
+            let errMsg = 'Unknown error';
+            if (err instanceof Error) {
+                errMsg = err.message;
+            }
             this.statusMsg = 'ERROR: ' + errMsg;
             this.statusAlertType = 'error';
             this.dialog.open(MessageDialog, {
@@ -7525,7 +7676,7 @@ class SessionManager {
             if (this.ac) {
                 this.transportActions.startAction.onAction = () => this.startItem();
                 this.ac.listener = this;
-                this.ac.audioOutStream = new SequenceAudioFloat32ChunkerOutStream(this.streamLevelMeasure, LEVEL_BAR_INTERVALL_SECONDS);
+                this.ac.audioOutStream = new SequenceAudioFloat32ChunkerOutStream(this.streamLevelMeasure, LEVEL_BAR_INTERVALL_SECONDS$1);
                 // Don't list the devices here. If we do not have audio permissions we only get anonymized devices without labels.
                 //this.ac.listDevices();
             }
@@ -7721,7 +7872,7 @@ class SessionManager {
                 for (let piSectIdx = 0; piSectIdx < pisLen; piSectIdx++) {
                     let pi = pis[piSectIdx];
                     let promptAsStr = PromptitemUtil.toPlainTextString(pi);
-                    let it = new Item(promptAsStr, section.training, (!pi.type || pi.type === 'recording'));
+                    let it = new Item$1(promptAsStr, section.training, (!pi.type || pi.type === 'recording'));
                     this.items.push(it);
                     ln++;
                 }
@@ -7800,7 +7951,7 @@ class SessionManager {
                 this.controlAudioPlayer.audioClip = null;
                 if (this._controlAudioPlayer && this._session) {
                     //... and try to fetch from server
-                    this.audioFetchSubscription = this.recFileService.fetchAndApplyRecordingFile(this._controlAudioPlayer.context, this._session.project, this._displayRecFile).subscribe((rf) => {
+                    this.audioFetchSubscription = this.recFileService.fetchAndApplySprRecordingFile(this._controlAudioPlayer.context, this._session.project, this._displayRecFile).subscribe((rf) => {
                         let fab = null;
                         if (rf && this._displayRecFile) {
                             fab = this._displayRecFile.audioBuffer;
@@ -7837,7 +7988,7 @@ class SessionManager {
     showRecording() {
         this.controlAudioPlayer.stop();
         if (this.displayAudioClip) {
-            this.levelMeasure.calcBufferLevelInfos(this.displayAudioClip.buffer, LEVEL_BAR_INTERVALL_SECONDS).then((levelInfos) => {
+            this.levelMeasure.calcBufferLevelInfos(this.displayAudioClip.buffer, LEVEL_BAR_INTERVALL_SECONDS$1).then((levelInfos) => {
                 this.displayLevelInfos = levelInfos;
                 this.changeDetectorRef.detectChanges();
             });
@@ -8227,7 +8378,7 @@ class SessionManager {
         if (this.promptItem.postrecording) {
             postDelay = this.promptItem.postrecording;
         }
-        let maxRecordingTimeMs = MAX_RECORDING_TIME_MS;
+        let maxRecordingTimeMs = MAX_RECORDING_TIME_MS$1;
         if (this.promptItem.recduration) {
             maxRecordingTimeMs = preDelay + this.promptItem.recduration + postDelay;
         }
@@ -8319,7 +8470,7 @@ class SessionManager {
                     if (!it.recs) {
                         it.recs = new Array();
                     }
-                    let rf = new RecordingFile(this._session.sessionId, rfd.recording.itemcode, rfd.version, null);
+                    let rf = new SprRecordingFile(this._session.sessionId, rfd.recording.itemcode, rfd.version, null);
                     it.recs[rfd.version] = rf;
                 }
                 else {
@@ -8355,7 +8506,7 @@ class SessionManager {
                 if (!it.recs) {
                     it.recs = new Array();
                 }
-                rf = new RecordingFile(sessId, ic, it.recs.length, ad);
+                rf = new SprRecordingFile(sessId, ic, it.recs.length, ad);
                 it.recs.push(rf);
             }
             if (this.enableUploadRecordings) {
@@ -8376,7 +8527,7 @@ class SessionManager {
                         apiEndPoint = apiEndPoint + '/';
                     }
                     let sessionsUrl = apiEndPoint + SessionService.SESSION_API_CTX;
-                    let recUrl = sessionsUrl + '/' + rf.session + '/' + RECFILE_API_CTX + '/' + rf.itemCode;
+                    let recUrl = sessionsUrl + '/' + rf.session + '/' + RECFILE_API_CTX$1 + '/' + rf.itemCode;
                     ww.writeAsync(ad, (wavFile) => {
                         this.postRecording(wavFile, recUrl);
                         this.processingRecording = false;
@@ -8485,8 +8636,8 @@ class SessionManager {
         });
     }
 }
-SessionManager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SessionManager, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1$3.MatDialog }, { token: SessionService }, { token: RecordingService }, { token: SpeechRecorderUploader }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-SessionManager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SessionManager, selector: "app-sprrecordingsession", inputs: { projectName: "projectName", dataSaved: "dataSaved" }, host: { listeners: { "window:keypress": "onKeyPress($event)", "window:keydown": "onKeyDown($event)" } }, providers: [SessionService], viewQueries: [{ propertyName: "prompting", first: true, predicate: Prompting, descendants: true, static: true }, { propertyName: "liveLevelDisplay", first: true, predicate: LevelBar, descendants: true, static: true }], ngImport: i0, template: `
+SessionManager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SessionManager, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1$3.MatDialog }, { token: SessionService }, { token: RecordingService }, { token: SpeechRecorderUploader }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
+SessionManager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: SessionManager, selector: "app-sprrecordingsession", inputs: { projectName: "projectName", dataSaved: "dataSaved" }, host: { listeners: { "window:keypress": "onKeyPress($event)", "window:keydown": "onKeyDown($event)" } }, providers: [SessionService], viewQueries: [{ propertyName: "prompting", first: true, predicate: Prompting, descendants: true, static: true }, { propertyName: "liveLevelDisplay", first: true, predicate: LevelBar, descendants: true, static: 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>
       <app-sprprompting [projectName]="projectName"
@@ -8531,8 +8682,8 @@ SessionManager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
       <app-readystateindicator class="ricontrols" fxLayoutAlign="end center" fxHide.xs [ready]="dataSaved && !isActive()"></app-readystateindicator>
     </div>
     </div>
-  `, isInline: true, styles: [":host {\n    flex: 2;\n    background: lightgrey;\n    display: flex; /* Vertical flex container: Bottom transport panel, above prompting panel */\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    min-height: 0px;\n\n      /* Prevents horizontal scroll bar on swipe right */\n      overflow: hidden;\n  }", ".ricontrols {\n        padding: 4px;\n        box-sizing: border-box;\n        height: 100%;\n    }", ".dark {\n    background: darkgray;\n  }", ".controlpanel {\n    align-content: center;\n    align-items: center;\n    margin: 0;\n    padding: 20px;\n    min-height: min-content; /* important */\n  }"], components: [{ type: WarningBar, selector: "app-warningbar", inputs: ["warningText", "show"] }, { type: Prompting, selector: "app-sprprompting", inputs: ["projectName", "startStopSignalState", "promptItem", "showPrompt", "items", "selectedItemIdx", "transportActions", "enableDownload", "audioSignalCollapsed", "displayAudioClip", "playStartAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "playStopAction"], outputs: ["onItemSelect", "onNextItem", "onPrevItem"] }, { type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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: TransportPanel, selector: "app-sprtransport", inputs: ["readonly", "actions", "navigationEnabled"] }], directives: [{ 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"] }, { 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: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SessionManager, decorators: [{
+  `, 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"], components: [{ type: WarningBar, selector: "app-warningbar", inputs: ["warningText", "show"] }, { type: Prompting, selector: "app-sprprompting", inputs: ["projectName", "startStopSignalState", "promptItem", "showPrompt", "items", "selectedItemIdx", "transportActions", "enableDownload", "audioSignalCollapsed", "displayAudioClip", "playStartAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "playStopAction"], outputs: ["onItemSelect", "onNextItem", "onPrevItem"] }, { type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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: TransportPanel, selector: "app-sprtransport", inputs: ["readonly", "actions", "navigationEnabled", "pausingEnabled"] }], directives: [{ 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"] }, { 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: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SessionManager, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sprrecordingsession',
@@ -8661,9 +8812,9 @@ class ScriptService {
         return this.http.get(scriptUrl, { withCredentials: this.withCredentials });
     }
 }
-ScriptService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ScriptService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-ScriptService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ScriptService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ScriptService, decorators: [{
+ScriptService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ScriptService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+ScriptService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ScriptService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ScriptService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
@@ -8699,9 +8850,13 @@ class SpeechrecorderngComponent {
             this.sm.statusMsg = 'Player initialized.';
         }
         catch (err) {
-            this.sm.statusMsg = err.message;
+            let errMsg = 'Unknown error';
+            if (err instanceof Error) {
+                errMsg = err.message;
+            }
+            this.sm.statusMsg = errMsg;
             this.sm.statusAlertType = 'error';
-            console.error(err.message);
+            console.error(errMsg);
         }
     }
     ngAfterViewInit() {
@@ -9052,11 +9207,11 @@ class SpeechrecorderngComponent {
         this.sm.statusMsg = 'ERROR: Recording.';
     }
 }
-SpeechrecorderngComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", 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: "12.2.13", type: SpeechrecorderngComponent, selector: "app-speechrecorder", providers: [SessionService], viewQueries: [{ propertyName: "sm", first: true, predicate: SessionManager, descendants: true, static: true }], ngImport: i0, template: `
+SpeechrecorderngComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", 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.2.1", type: SpeechrecorderngComponent, selector: "app-speechrecorder", providers: [SessionService], viewQueries: [{ propertyName: "sm", first: true, predicate: SessionManager, descendants: true, static: true }], ngImport: i0, template: `
     <app-sprrecordingsession [projectName]="project?.name" [dataSaved]="dataSaved"></app-sprrecordingsession>
-  `, isInline: true, styles: [":host{\n    flex: 2;\n    display: flex;\n    flex-direction: column;\n    min-height:0;\n\n  }"], components: [{ type: SessionManager, selector: "app-sprrecordingsession", inputs: ["projectName", "dataSaved"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SpeechrecorderngComponent, decorators: [{
+  `, 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.2.1", ngImport: i0, type: SpeechrecorderngComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-speechrecorder',
@@ -9079,9 +9234,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
 
 class ScrollPaneHorizontal {
 }
-ScrollPaneHorizontal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ScrollPaneHorizontal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ScrollPaneHorizontal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ScrollPaneHorizontal, selector: "scroll-pane-horizontal", ngImport: i0, template: '', isInline: true, styles: [":host {\n      width: 100%;\n      background: darkgray;\n      box-sizing: border-box;\n      height: 100%;\n      position: relative;\n      overflow-x: scroll;\n      overflow-y: auto;\n    }"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ScrollPaneHorizontal, decorators: [{
+ScrollPaneHorizontal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ScrollPaneHorizontal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ScrollPaneHorizontal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: ScrollPaneHorizontal, selector: "scroll-pane-horizontal", ngImport: i0, template: '', isInline: true, styles: [":host{width:100%;background:darkgray;box-sizing:border-box;height:100%;position:relative;overflow-x:scroll;overflow-y:auto}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ScrollPaneHorizontal, decorators: [{
             type: Component,
             args: [{
                     selector: 'scroll-pane-horizontal',
@@ -9129,7 +9284,9 @@ class AudioDisplayPlayer {
             }
         }
         catch (err) {
-            this.status = err.message;
+            if (err instanceof Error) {
+                this.status = err.message;
+            }
         }
     }
     ngAfterContentInit() {
@@ -9140,9 +9297,9 @@ class AudioDisplayPlayer {
     }
     ngAfterViewInit() {
         if (this.aCtx && this.ap) {
-            this.playStartAction.onAction = () => { var _a; return (_a = this.ap) === null || _a === void 0 ? void 0 : _a.start(); };
-            this.playSelectionAction.onAction = () => { var _a; return (_a = this.ap) === null || _a === void 0 ? void 0 : _a.startSelected(); };
-            this.playStopAction.onAction = () => { var _a; return (_a = this.ap) === null || _a === void 0 ? void 0 : _a.stop(); };
+            this.playStartAction.onAction = () => this.ap?.start();
+            this.playSelectionAction.onAction = () => this.ap?.startSelected();
+            this.playStopAction.onAction = () => this.ap?.stop();
         }
         this.layout();
         let heightListener = new MutationObserver((mrs, mo) => {
@@ -9298,8 +9455,8 @@ class AudioDisplayPlayer {
         this.status = 'ERROR';
     }
 }
-AudioDisplayPlayer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AudioDisplayPlayer, deps: [{ token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AudioDisplayPlayer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AudioDisplayPlayer, selector: "app-audiodisplayplayer", inputs: { playStartAction: "playStartAction", playStopAction: "playStopAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", audioData: "audioData", audioClip: "audioClip" }, viewQueries: [{ propertyName: "audioDisplayScrollPane", first: true, predicate: AudioDisplayScrollPane, descendants: true, static: true }], ngImport: i0, template: `
+AudioDisplayPlayer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioDisplayPlayer, deps: [{ token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AudioDisplayPlayer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: AudioDisplayPlayer, selector: "app-audiodisplayplayer", inputs: { playStartAction: "playStartAction", playStopAction: "playStopAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", audioData: "audioData", audioClip: "audioClip" }, viewQueries: [{ propertyName: "audioDisplayScrollPane", first: true, predicate: AudioDisplayScrollPane, descendants: true, static: true }], ngImport: i0, template: `
 
     <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>
 
@@ -9312,8 +9469,8 @@ AudioDisplayPlayer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                              [zoomOutAction]="zoomOutAction"
                              [zoomSelectedAction]="zoomSelectedAction"
                              [zoomFitToPanelAction]="zoomFitToPanelAction"></audio-display-control><p>{{status}}
-  `, isInline: true, styles: [":host {\n      display: flex;\n      flex-direction: column;\n      position: absolute;\n      bottom: 0px;\n      height: 100%;\n      width: 100%;\n      overflow: hidden;\n      padding: 20px;\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: rgba(0, 0, 0, 0.75)\n    }"], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AudioDisplayPlayer, decorators: [{
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;position:absolute;bottom:0px;height:100%;width:100%;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#000000bf}\n"], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioDisplayPlayer, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-audiodisplayplayer',
@@ -9485,6 +9642,15 @@ class RecordingFileService {
         }
         return this.http.get(recUrl, { withCredentials: this.withCredentials });
     }
+    sprRecordingFileDescrObserver(recordingFileId) {
+        let recUrl = this.recoFileUrl(recordingFileId);
+        if (this.config && this.config.apiType === ApiType.FILES) {
+            // for development and demo
+            // append UUID to make request URL unique to avoid localhost server caching
+            recUrl = recUrl + '.json?requestUUID=' + UUID.generate();
+        }
+        return this.http.get(recUrl, { withCredentials: this.withCredentials });
+    }
     fetchSessionAudiofileById(projectName, sessId, recordingFileId) {
         let recUrl = this.recoFileUrl(recordingFileId);
         // if (this.config && this.config.apiType === ApiType.FILES) {
@@ -9593,6 +9759,57 @@ class RecordingFileService {
         });
         return wobs;
     }
+    fetchSprRecordingFile(aCtx, recordingFileId) {
+        let wobs = new Observable(observer => {
+            let rf = null;
+            let rfDescrObs = this.sprRecordingFileDescrObserver(recordingFileId);
+            rfDescrObs.subscribe(value => {
+                rf = value;
+            }, (error) => {
+                observer.error(error);
+            }, () => {
+                let rfAudioObs = this.fetchAudiofile(recordingFileId);
+                rfAudioObs.subscribe(resp => {
+                    // Do not use Promise version, which does not work with Safari 13
+                    if (resp.body) {
+                        aCtx.decodeAudioData(resp.body, ab => {
+                            if (rf) {
+                                rf.audioBuffer = ab;
+                            }
+                            else {
+                                observer.error('Recording file object null');
+                            }
+                            if (this.debugDelay > 0) {
+                                window.setTimeout(() => {
+                                    observer.next(rf);
+                                    observer.complete();
+                                }, this.debugDelay);
+                            }
+                            else {
+                                observer.next(rf);
+                                observer.complete();
+                            }
+                        });
+                    }
+                    else {
+                        observer.error('Received no audio data');
+                    }
+                }, (error) => {
+                    if (error.status == 404) {
+                        // Interpret not as an error, the file ist not recorded yet
+                        observer.next(null);
+                        observer.complete();
+                    }
+                    else {
+                        // all other states are errors
+                        observer.error(error);
+                        observer.complete();
+                    }
+                });
+            });
+        });
+        return wobs;
+    }
     saveEditSelection(recordingFileId, editSampleRate, editStartFrame, editEndFrame) {
         let recUrl = this.apiEndPoint + RecordingFileService.RECOFILE_API_CTX + '/' + recordingFileId;
         if (this.config && this.config.apiType === ApiType.FILES) {
@@ -9605,9 +9822,9 @@ class RecordingFileService {
     }
 }
 RecordingFileService.RECOFILE_API_CTX = 'recordingfile';
-RecordingFileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingFileService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-RecordingFileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingFileService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingFileService, decorators: [{
+RecordingFileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingFileService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+RecordingFileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingFileService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingFileService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
@@ -9617,35 +9834,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
 class RecordingFileMetaComponent {
     constructor() {
         this.sessionId = null;
-        this.recordingFile = null;
+        this._recordingFile = null;
+        this.itemCode = null;
+        this.uuid = null;
+    }
+    get recordingFile() {
+        return this._recordingFile;
+    }
+    set recordingFile(recordingFile) {
+        this._recordingFile = recordingFile;
+        if (this._recordingFile) {
+            this.itemCode = this._recordingFile.itemCode;
+            if (!this.itemCode && this._recordingFile.recording?.itemcode) {
+                this.itemCode = this._recordingFile.recording.itemcode;
+            }
+            if (this.itemCode) {
+                this.uuid = null;
+                console.debug("SprRecordingFile: " + this.itemCode + " UUID: " + this.uuid);
+            }
+            else {
+                this.itemCode = null;
+                this.uuid = this._recordingFile?.uuid;
+                console.debug("RecordingFile: " + this.itemCode + " UUID: " + this.uuid);
+            }
+        }
+        else {
+            this.itemCode = null;
+            this.uuid = null;
+        }
     }
     recordingAsPlainText() {
         let t = null;
-        if (this.recordingFile) {
-            t = RecordingFileUtil.recordingAsPlainText(this.recordingFile);
+        if (this._recordingFile) {
+            t = RecordingFileUtil.recordingAsPlainText(this._recordingFile);
         }
         return t;
     }
 }
-RecordingFileMetaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingFileMetaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RecordingFileMetaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: { sessionId: "sessionId", recordingFile: "recordingFile" }, ngImport: i0, template: `
+RecordingFileMetaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingFileMetaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RecordingFileMetaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: { sessionId: "sessionId", recordingFile: "recordingFile" }, ngImport: i0, template: `
     <mat-card>
       <mat-card-title>Recording file ID: {{recordingFile?.recordingFileId}}</mat-card-title>
       <mat-card-content>
         <table>
-          <tr>
+          <tr *ngIf="itemCode">
             <td>Itemcode:</td>
-            <td>{{recordingFile?.recording?.itemcode}}</td>
+            <td>{{itemCode}}</td>
+          </tr>
+          <tr *ngIf="uuid && !itemCode">
+            <td>UUID:</td>
+            <td>{{uuid}}</td>
           </tr>
-          <tr *ngIf="recordingFile?.date">
+          <tr *ngIf="recordingFile?.startedDate">
+            <td>Started:</td>
+            <td>{{recordingFile?.startedDate}}</td>
+          </tr>
+          <tr *ngIf="!recordingFile?.startedDate && recordingFile?.date">
             <td>Date:</td>
             <td>{{recordingFile?.date}}</td>
           </tr>
-          <tr>
+          <tr *ngIf="itemCode">
             <td>Prompt:</td>
             <td>{{recordingAsPlainText()}}</td>
           </tr>
-         
+
           <tr *ngIf="sessionId">
             <td>Session:</td>
             <td>{{sessionId}}</td>
@@ -9654,7 +9906,7 @@ RecordingFileMetaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
       </mat-card-content>
     </mat-card>
   `, isInline: true, components: [{ type: i1$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }], directives: [{ type: i1$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1$4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingFileMetaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingFileMetaComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-recording-file-meta',
@@ -9663,19 +9915,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
       <mat-card-title>Recording file ID: {{recordingFile?.recordingFileId}}</mat-card-title>
       <mat-card-content>
         <table>
-          <tr>
+          <tr *ngIf="itemCode">
             <td>Itemcode:</td>
-            <td>{{recordingFile?.recording?.itemcode}}</td>
+            <td>{{itemCode}}</td>
+          </tr>
+          <tr *ngIf="uuid && !itemCode">
+            <td>UUID:</td>
+            <td>{{uuid}}</td>
+          </tr>
+          <tr *ngIf="recordingFile?.startedDate">
+            <td>Started:</td>
+            <td>{{recordingFile?.startedDate}}</td>
           </tr>
-          <tr *ngIf="recordingFile?.date">
+          <tr *ngIf="!recordingFile?.startedDate && recordingFile?.date">
             <td>Date:</td>
             <td>{{recordingFile?.date}}</td>
           </tr>
-          <tr>
+          <tr *ngIf="itemCode">
             <td>Prompt:</td>
             <td>{{recordingAsPlainText()}}</td>
           </tr>
-         
+
           <tr *ngIf="sessionId">
             <td>Session:</td>
             <td>{{sessionId}}</td>
@@ -9709,8 +9969,8 @@ class RecordingFileNaviComponent {
         }
     }
 }
-RecordingFileNaviComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingFileNaviComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RecordingFileNaviComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: { firstAction: "firstAction", prevAction: "prevAction", nextAction: "nextAction", lastAction: "lastAction", items: "items", itemPos: "itemPos", selectVersion: "selectVersion", versions: "versions", version: "version", naviInfoLoading: "naviInfoLoading" }, ngImport: i0, template: `
+RecordingFileNaviComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingFileNaviComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RecordingFileNaviComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: { firstAction: "firstAction", prevAction: "prevAction", nextAction: "nextAction", lastAction: "lastAction", items: "items", itemPos: "itemPos", selectVersion: "selectVersion", versions: "versions", version: "version", naviInfoLoading: "naviInfoLoading" }, ngImport: i0, template: `
         <div #controlPanel style="display:flex;flex-direction: row;">
           <div #navi style="flex: 0;display:flex;flex-direction: row;flex-wrap: nowrap">
             <fieldset>
@@ -9742,8 +10002,8 @@ RecordingFileNaviComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             </fieldset>
           </div>
         </div>
-          `, isInline: true, styles: [":host {\n        flex: 0;\n\n      }"], components: [{ type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "mode", "diameter", "strokeWidth", "value"], exportAs: ["matProgressSpinner"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingFileNaviComponent, decorators: [{
+          `, isInline: true, styles: [":host{flex:0}\n"], components: [{ type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingFileNaviComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-recording-file-navi',
@@ -9827,6 +10087,7 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
         this.sessionIdFromRoute = null;
         this.versions = null;
         this.recordingFile = null;
+        this.recordingFileVersion = null;
         this.routedByQueryParam = false;
         this.posInList = null;
         this.naviInfoLoading = false;
@@ -9905,9 +10166,11 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
             let cRfs = this.availRecFiles[this.posInList];
             let availVersionCnt = cRfs.length;
             for (let cRf of cRfs) {
-                if (cRf.version === version) {
-                    toRfId = cRf.recordingFileId;
-                    break;
+                if (cRf instanceof SprRecordingFile) {
+                    if (cRf.version === version) {
+                        toRfId = cRf.recordingFileId;
+                        break;
+                    }
                 }
             }
         }
@@ -9929,12 +10192,26 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
     }
     positionInList() {
         if (this.availRecFiles && this.recordingFile) {
-            let cic = this.recordingFile.recording.itemcode;
-            let itemCnt = this.availRecFiles.length;
-            for (let rfdi = 0; rfdi < itemCnt; rfdi++) {
-                let ar = this.availRecFiles[rfdi][0].recording;
-                if (cic === ar.itemcode) {
-                    return rfdi;
+            let cic = this.recordingFile.itemCode;
+            if (cic) {
+                let itemCnt = this.availRecFiles.length;
+                for (let rfdi = 0; rfdi < itemCnt; rfdi++) {
+                    let arRf = this.availRecFiles[rfdi][0];
+                    if (arRf instanceof SprRecordingFile) {
+                        let ar = arRf.recording;
+                        if (cic === ar.itemcode) {
+                            return rfdi;
+                        }
+                    }
+                }
+            }
+            else {
+                let itemCnt = this.availRecFiles.length;
+                for (let rfdi = 0; rfdi < itemCnt; rfdi++) {
+                    let arRf = this.availRecFiles[rfdi][0];
+                    if (this.recordingFile.uuid === arRf.uuid) {
+                        return rfdi;
+                    }
                 }
             }
         }
@@ -9950,7 +10227,9 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
                 if (arfs) {
                     this.versions = new Array();
                     for (let arf of arfs) {
-                        this.versions.push(arf.version);
+                        if (arf instanceof SprRecordingFile) {
+                            this.versions.push(arf.version);
+                        }
                     }
                     this.toVersionAction.disabled = (this.versions.length < 2);
                 }
@@ -9959,15 +10238,14 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
         this.updateActions();
     }
     loadRecFile(rfId) {
-        var _a;
-        (_a = this.ap) === null || _a === void 0 ? void 0 : _a.stop();
+        this.ap?.stop();
         this.audioClip = null;
         this.recordingFile = null;
         this.posInList = null;
         this.updateActions();
         let audioContext = AudioContextProvider.audioContextInstance();
         if (audioContext) {
-            this.recordingFileService.fetchRecordingFile(audioContext, rfId).subscribe(value => {
+            this.recordingFileService.fetchSprRecordingFile(audioContext, rfId).subscribe(value => {
                 this.status = 'Audio file loaded.';
                 let clip = null;
                 this.recordingFile = value;
@@ -10041,7 +10319,7 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
                 // received session data
                 this.sessionId = s.sessionId;
                 // fetch recording file meta data list
-                this.recordingService.recordingFileList(s.project, s.sessionId).subscribe((rfds) => {
+                this.recordingService.sprRecordingFileList(s.project, s.sessionId).subscribe((rfds) => {
                     this.availRecFiles = new Array();
                     // build structure indexed by itemcode
                     let icIdx = new ItemcodeIndex();
@@ -10052,8 +10330,13 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
                             let rfdd = new Date(rfd.date);
                             rfd._dateAsDateObj = rfdd;
                         }
-                        let r = rfd.recording;
-                        let ic = r.itemcode;
+                        let ic = rfd.itemCode;
+                        if (!ic) {
+                            let r = rfd.recording;
+                            if (r && r.itemcode) {
+                                ic = r.itemcode;
+                            }
+                        }
                         if (ic) {
                             let exRfsForIc = icIdx[ic];
                             if (exRfsForIc == null) {
@@ -10072,8 +10355,13 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
                                 });
                             }
                         }
+                        else {
+                            let arfd = new Array();
+                            arfd.push(rfd);
+                            this.availRecFiles.push(arfd);
+                        }
                     }
-                    // have unsorted ietmcode indexed recording files here
+                    // have unsorted itemcode indexed recording files here
                     // sort them ordered by date of latest version ascending
                     this.availRecFiles.sort((rfs1, rfs2) => {
                         let d1 = rfs2[0]._dateAsDateObj;
@@ -10106,8 +10394,8 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
         }
     }
 }
-RecordingFileViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingFileViewComponent, deps: [{ token: RecordingFileService }, { token: RecordingService }, { token: SessionService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-RecordingFileViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: RecordingFileViewComponent, selector: "app-audiodisplayplayer", viewQueries: [{ propertyName: "ac", first: true, predicate: AudioDisplayScrollPane, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+RecordingFileViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingFileViewComponent, deps: [{ token: RecordingFileService }, { token: RecordingService }, { token: SessionService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+RecordingFileViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: RecordingFileViewComponent, selector: "app-audiodisplayplayer", viewQueries: [{ propertyName: "ac", first: true, predicate: AudioDisplayScrollPane, descendants: true }], usesInheritance: true, ngImport: i0, template: `
 
     <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>
     <div class="ctrlview">
@@ -10122,10 +10410,10 @@ RecordingFileViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                              [zoomOutAction]="zoomOutAction"
                              [zoomSelectedAction]="zoomSelectedAction"
                            [zoomFitToPanelAction]="zoomFitToPanelAction"></audio-display-control>
-      <app-recording-file-navi [items]="availRecFiles?.length" [itemPos]="posInList" [version]="recordingFile?recordingFile.version:null" [versions]="versions" [firstAction]="firstAction" [prevAction]="prevAction" [nextAction]="nextAction" [lastAction]="lastAction" [selectVersion]="toVersionAction" [naviInfoLoading]="naviInfoLoading"></app-recording-file-navi>
+      <app-recording-file-navi [items]="availRecFiles?.length" [itemPos]="posInList" [version]="recordingFileVersion" [versions]="versions" [firstAction]="firstAction" [prevAction]="prevAction" [nextAction]="nextAction" [lastAction]="lastAction" [selectVersion]="toVersionAction" [naviInfoLoading]="naviInfoLoading"></app-recording-file-navi>
       </div>
-  `, isInline: true, styles: [":host {\n          flex: 2;\n          display: flex;\n          flex-direction: column;\n          min-height:0;\n          overflow: hidden;\n      padding: 20px;\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: white;\n    }", "\n        .ctrlview{\n          display: flex;\n          flex-direction: row;\n\n        }\n    ", "\n      audio-display-control{\n\n        flex: 3;\n      }\n    "], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "recordingFile"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingFileViewComponent, decorators: [{
+  `, isInline: true, styles: [":host{flex:2;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#fff}\n", ".ctrlview{display:flex;flex-direction:row}\n", "audio-display-control{flex:3}\n"], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "recordingFile"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingFileViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-audiodisplayplayer',
@@ -10144,7 +10432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                              [zoomOutAction]="zoomOutAction"
                              [zoomSelectedAction]="zoomSelectedAction"
                            [zoomFitToPanelAction]="zoomFitToPanelAction"></audio-display-control>
-      <app-recording-file-navi [items]="availRecFiles?.length" [itemPos]="posInList" [version]="recordingFile?recordingFile.version:null" [versions]="versions" [firstAction]="firstAction" [prevAction]="prevAction" [nextAction]="nextAction" [lastAction]="lastAction" [selectVersion]="toVersionAction" [naviInfoLoading]="naviInfoLoading"></app-recording-file-navi>
+      <app-recording-file-navi [items]="availRecFiles?.length" [itemPos]="posInList" [version]="recordingFileVersion" [versions]="versions" [firstAction]="firstAction" [prevAction]="prevAction" [nextAction]="nextAction" [lastAction]="lastAction" [selectVersion]="toVersionAction" [naviInfoLoading]="naviInfoLoading"></app-recording-file-navi>
       </div>
   `,
                     styles: [
@@ -10225,15 +10513,20 @@ class RecordingFileUI extends RecordingFileViewComponent {
         this.editSaved = true;
     }
     applySelection() {
-        var _a;
         if (this.audioClip) {
             let ab = this.audioClip.buffer;
             let s = this.audioClip.selection;
-            if (s && ab && ((_a = this.recordingFile) === null || _a === void 0 ? void 0 : _a.recordingFileId)) {
-                let sr = ab.sampleRate;
-                let sf = s.startFrame;
-                let ef = s.endFrame;
-                this.recordingFileService.saveEditSelection(this.recordingFile.recordingFileId, sr, sf, ef).subscribe((value) => { }, () => {
+            if (ab && this.recordingFile?.recordingFileId) {
+                let sr = null;
+                let sf = null;
+                let ef = null;
+                if (s) {
+                    sr = ab.sampleRate;
+                    sf = s.startFrame;
+                    ef = s.endFrame;
+                }
+                this.recordingFileService.saveEditSelection(this.recordingFile.recordingFileId, sr, sf, ef).subscribe((value) => {
+                }, () => {
                     this.dialog.open(MessageDialog, {
                         data: {
                             type: 'error',
@@ -10252,8 +10545,8 @@ class RecordingFileUI extends RecordingFileViewComponent {
         }
     }
 }
-RecordingFileUI.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingFileUI, deps: [{ token: RecordingFileService }, { token: RecordingService }, { token: SessionService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$3.MatDialog }, { token: i6.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
-RecordingFileUI.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: RecordingFileUI, selector: "app-audiodisplayplayer", usesInheritance: true, ngImport: i0, template: `
+RecordingFileUI.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingFileUI, deps: [{ token: RecordingFileService }, { token: RecordingService }, { token: SessionService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$3.MatDialog }, { token: i6.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
+RecordingFileUI.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: RecordingFileUI, selector: "app-audiodisplayplayer", usesInheritance: true, ngImport: i0, template: `
       <h1>Recording file editing</h1>
       <p>On export or delivery the editing selection of the recording file is cut out. If no editing selection is applied the original file is exported.</p>
 
@@ -10269,12 +10562,12 @@ RecordingFileUI.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                              [zoomOutAction]="zoomOutAction"
                              [zoomSelectedAction]="zoomSelectedAction"
                            [zoomFitToPanelAction]="zoomFitToPanelAction"></audio-display-control>
-        <app-recording-file-navi [items]="availRecFiles?.length" [itemPos]="posInList" [version]="recordingFile?recordingFile.version:null" [versions]="versions" [firstAction]="firstAction" [prevAction]="prevAction" [nextAction]="nextAction" [lastAction]="lastAction" [selectVersion]="toVersionAction" [naviInfoLoading]="naviInfoLoading"></app-recording-file-navi>
+        <app-recording-file-navi [items]="availRecFiles?.length" [itemPos]="posInList" [version]="recordingFileVersion" [versions]="versions" [firstAction]="firstAction" [prevAction]="prevAction" [nextAction]="nextAction" [lastAction]="lastAction" [selectVersion]="toVersionAction" [naviInfoLoading]="naviInfoLoading"></app-recording-file-navi>
       </div>
 
       <button mat-raised-button color="accent" (click)="applySelection()" [disabled]="editSaved">{{this.applyButtonText()}}</button>
-  `, isInline: true, styles: [":host {\n          flex: 2;\n          display: flex;\n          flex-direction: column;\n          min-height:0;\n          overflow: hidden;\n      padding: 20px;\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: white;\n    }", "\n        .ctrlview{\n          display: flex;\n          flex-direction: row;\n        }\n    ", "\n      audio-display-control{\n\n        flex: 3;\n      }\n    "], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "recordingFile"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }, { 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: RecordingFileUI, decorators: [{
+  `, isInline: true, styles: [":host{flex:2;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#fff}\n", ".ctrlview{display:flex;flex-direction:row}\n", "audio-display-control{flex:3}\n"], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "recordingFile"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }, { 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingFileUI, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-audiodisplayplayer',
@@ -10294,7 +10587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                              [zoomOutAction]="zoomOutAction"
                              [zoomSelectedAction]="zoomSelectedAction"
                            [zoomFitToPanelAction]="zoomFitToPanelAction"></audio-display-control>
-        <app-recording-file-navi [items]="availRecFiles?.length" [itemPos]="posInList" [version]="recordingFile?recordingFile.version:null" [versions]="versions" [firstAction]="firstAction" [prevAction]="prevAction" [nextAction]="nextAction" [lastAction]="lastAction" [selectVersion]="toVersionAction" [naviInfoLoading]="naviInfoLoading"></app-recording-file-navi>
+        <app-recording-file-navi [items]="availRecFiles?.length" [itemPos]="posInList" [version]="recordingFileVersion" [versions]="versions" [firstAction]="firstAction" [prevAction]="prevAction" [nextAction]="nextAction" [lastAction]="lastAction" [selectVersion]="toVersionAction" [naviInfoLoading]="naviInfoLoading"></app-recording-file-navi>
       </div>
 
       <button mat-raised-button color="accent" (click)="applySelection()" [disabled]="editSaved">{{this.applyButtonText()}}</button>
@@ -10325,8 +10618,1296 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: RecordingFileService }, { type: RecordingService }, { type: SessionService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$3.MatDialog }, { type: i6.MatSnackBar }]; } });
 
+class MediaUtils {
+    static toMediaTime(timeInSeconds) {
+        let rest = timeInSeconds;
+        let hours = Math.floor(timeInSeconds / 3600);
+        rest -= hours * 3600;
+        let minutes = Math.floor(rest / 60);
+        rest -= minutes * 60;
+        let seconds = Math.floor(rest);
+        rest -= seconds;
+        let millis = Math.round(rest * 1000);
+        return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0') + '.' + millis.toString().padStart(3, '0');
+    }
+}
+
+class RecordingList {
+    constructor() {
+        this.recordingList = new Array();
+        //cols=['index','length','samples','samplerate','action'];
+        this.cols = ['index', 'startedDate', 'length', 'action'];
+        this.selectDisabled = false;
+        this.selectedRecordingFileChanged = new EventEmitter();
+        this.selectedRecordingFile = null;
+        this.recordingListDataSource = new MatTableDataSource();
+    }
+    ngAfterViewInit() {
+        this.recordingListDataSource.data = this.recordingList.reverse();
+    }
+    push(rf) {
+        this.recordingList.push(rf);
+        this.recordingListDataSource.data = this.recordingList.reverse();
+    }
+    selectRecordingFile(rf) {
+        this.selectedRecordingFileChanged.emit(rf);
+    }
+    lengthTimeFormatted(rf) {
+        let str = '--:--:--';
+        if (rf.frames && rf.audioBuffer) {
+            str = MediaUtils.toMediaTime(rf.frames / rf.audioBuffer?.sampleRate);
+        }
+        return str;
+    }
+}
+RecordingList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RecordingList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: RecordingList, selector: "app-recordinglist", inputs: { selectDisabled: "selectDisabled", selectedRecordingFile: "selectedRecordingFile" }, outputs: { selectedRecordingFileChanged: "selectedRecordingFileChanged" }, ngImport: i0, template: `
+    <mat-card>
+        <mat-card-header>
+          <h2>Recording list</h2>
+        </mat-card-header>
+      <mat-card-content>
+    <table mat-table [dataSource]="recordingListDataSource" class="mat-elevation-z0">
+      <tr mat-header-row *matHeaderRowDef="cols;sticky:true"></tr>
+      <tr mat-row *matRowDef="let element; columns: cols;" [scrollIntoViewToBottom]="element.uuid===selectedRecordingFile?.uuid"></tr>
+      <ng-container matColumnDef="index">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
+        <td mat-cell class="monospaced" *matCellDef="let element;let i = index">{{recordingListDataSource.data.length-i}}</td>
+      </ng-container>
+      <ng-container matColumnDef="startedDate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Started</th>
+        <td mat-cell class="monospaced" *matCellDef="let element">{{element.startedDate | date:'YYYY-MM-dd HH:mm:ss'}}</td>
+      </ng-container>
+      <ng-container matColumnDef="length">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Length</th>
+        <td mat-cell class="monospaced" *matCellDef="let element">{{lengthTimeFormatted(element)}}</td>
+      </ng-container>
+      <ng-container matColumnDef="action">
+        <th mat-header-cell *matHeaderCellDef>Action</th>
+        <td mat-cell *matCellDef="let element"><button mat-stroked-button color="primary" (click)="selectRecordingFile(element)" [disabled]="selectDisabled || element.uuid===selectedRecordingFile?.uuid"><mat-icon>edit_attributes</mat-icon> Select</button></td>
+      </ng-container>
+    </table>
+      </mat-card-content>
+    </mat-card>
+
+  `, isInline: true, styles: [".monospaced{font-family:monospace}.mat-cell,.mat-header-cell{padding-left:5px;padding-right:5px}.mat-card,.mat-card-header,.mat-card-content{width:auto}.flexForm{display:flex;flex-direction:column;width:auto}\n", ":host{position:relative;margin:0;padding:0;background:lightgrey;width:100%;flex:1;overflow-y:auto;min-height:0px}\n", ".selected{font-weight:700}\n"], components: [{ type: i1$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1$4.MatCardHeader, selector: "mat-card-header" }, { type: i2$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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: i1$4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i2$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: ScrollIntoViewDirective, selector: "[scrollIntoViewToBottom]", inputs: ["scrollIntoViewToBottom"] }, { type: i2$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2$2.MatCellDef, selector: "[matCellDef]" }, { type: i2$2.MatCell, selector: "mat-cell, td[mat-cell]" }], pipes: { "date": i4.DatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecordingList, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-recordinglist', template: `
+    <mat-card>
+        <mat-card-header>
+          <h2>Recording list</h2>
+        </mat-card-header>
+      <mat-card-content>
+    <table mat-table [dataSource]="recordingListDataSource" class="mat-elevation-z0">
+      <tr mat-header-row *matHeaderRowDef="cols;sticky:true"></tr>
+      <tr mat-row *matRowDef="let element; columns: cols;" [scrollIntoViewToBottom]="element.uuid===selectedRecordingFile?.uuid"></tr>
+      <ng-container matColumnDef="index">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
+        <td mat-cell class="monospaced" *matCellDef="let element;let i = index">{{recordingListDataSource.data.length-i}}</td>
+      </ng-container>
+      <ng-container matColumnDef="startedDate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Started</th>
+        <td mat-cell class="monospaced" *matCellDef="let element">{{element.startedDate | date:'YYYY-MM-dd HH:mm:ss'}}</td>
+      </ng-container>
+      <ng-container matColumnDef="length">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Length</th>
+        <td mat-cell class="monospaced" *matCellDef="let element">{{lengthTimeFormatted(element)}}</td>
+      </ng-container>
+      <ng-container matColumnDef="action">
+        <th mat-header-cell *matHeaderCellDef>Action</th>
+        <td mat-cell *matCellDef="let element"><button mat-stroked-button color="primary" (click)="selectRecordingFile(element)" [disabled]="selectDisabled || element.uuid===selectedRecordingFile?.uuid"><mat-icon>edit_attributes</mat-icon> Select</button></td>
+      </ng-container>
+    </table>
+      </mat-card-content>
+    </mat-card>
+
+  `, styles: [".monospaced{font-family:monospace}.mat-cell,.mat-header-cell{padding-left:5px;padding-right:5px}.mat-card,.mat-card-header,.mat-card-content{width:auto}.flexForm{display:flex;flex-direction:column;width:auto}\n", ":host{position:relative;margin:0;padding:0;background:lightgrey;width:100%;flex:1;overflow-y:auto;min-height:0px}\n", ".selected{font-weight:700}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { selectDisabled: [{
+                type: Input
+            }], selectedRecordingFileChanged: [{
+                type: Output
+            }], selectedRecordingFile: [{
+                type: Input
+            }] } });
+
+class RecorderCombiPane {
+    constructor() {
+        this.selectDisabled = false;
+        this.selectedRecordingFileChanged = new EventEmitter();
+        this.selectedRecordingFile = null;
+        this.audioSignalCollapsed = true;
+        this.displayAudioClip = null;
+    }
+    ngAfterViewInit() {
+    }
+    push(rf) {
+        this.recordingListComp.push(rf);
+    }
+    selectRecordingFile(rf) {
+        this.selectedRecordingFileChanged.emit(rf);
+    }
+}
+RecorderCombiPane.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: RecorderCombiPane, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RecorderCombiPane.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: RecorderCombiPane, selector: "app-recordercombipane", inputs: { selectDisabled: "selectDisabled", selectedRecordingFile: "selectedRecordingFile", audioSignalCollapsed: "audioSignalCollapsed", displayAudioClip: "displayAudioClip", playStartAction: "playStartAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", playStopAction: "playStopAction" }, outputs: { selectedRecordingFileChanged: "selectedRecordingFileChanged" }, viewQueries: [{ propertyName: "recordingListComp", first: true, predicate: RecordingList, descendants: true }, { propertyName: "audioDisplay", first: true, predicate: AudioDisplay, descendants: true, static: true }], ngImport: i0, template: `
+    <app-recordinglist [selectedRecordingFile]="selectedRecordingFile" [selectDisabled]="selectDisabled" (selectedRecordingFileChanged)="selectRecordingFile($event)"></app-recordinglist>
+    <div fxHide.xs #asCt [class.active]="!audioSignalCollapsed">
+      <app-audiodisplay #audioSignalContainer [class.active]="!audioSignalCollapsed"
+                        [audioClip]="displayAudioClip"
+                        [playStartAction]="playStartAction"
+                        [playSelectionAction]="playSelectionAction"
+                        [autoPlayOnSelectToggleAction]="autoPlayOnSelectToggleAction"
+                        [playStopAction]="playStopAction"></app-audiodisplay>
+    </div>
+  `, isInline: true, styles: [".monospaced{font-family:monospace}.mat-cell,.mat-header-cell{padding-left:5px;padding-right:5px}.mat-card,.mat-card-header,.mat-card-content{width:auto}.flexForm{display:flex;flex-direction:column;width:auto}\n", ":host{position:relative;margin:0;padding:0;background:lightgrey;width:100%;flex:1;overflow-y:auto;min-height:0px}\n", ".selected{font-weight:700}\n", "div{display:none;position:absolute;z-index:5}\n", "div.active{display:flex;position:absolute;bottom:0px;height:90%;width:100%;overflow:hidden;padding:0;z-index:200;box-sizing:border-box;background-color:#0000}\n"], components: [{ type: RecordingList, selector: "app-recordinglist", inputs: ["selectDisabled", "selectedRecordingFile"], outputs: ["selectedRecordingFileChanged"] }, { type: AudioDisplay, selector: "app-audiodisplay", inputs: ["playStartAction", "playStopAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "audioData", "audioClip"] }], directives: [{ 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.2.1", ngImport: i0, type: RecorderCombiPane, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-recordercombipane', template: `
+    <app-recordinglist [selectedRecordingFile]="selectedRecordingFile" [selectDisabled]="selectDisabled" (selectedRecordingFileChanged)="selectRecordingFile($event)"></app-recordinglist>
+    <div fxHide.xs #asCt [class.active]="!audioSignalCollapsed">
+      <app-audiodisplay #audioSignalContainer [class.active]="!audioSignalCollapsed"
+                        [audioClip]="displayAudioClip"
+                        [playStartAction]="playStartAction"
+                        [playSelectionAction]="playSelectionAction"
+                        [autoPlayOnSelectToggleAction]="autoPlayOnSelectToggleAction"
+                        [playStopAction]="playStopAction"></app-audiodisplay>
+    </div>
+  `, styles: [".monospaced{font-family:monospace}.mat-cell,.mat-header-cell{padding-left:5px;padding-right:5px}.mat-card,.mat-card-header,.mat-card-content{width:auto}.flexForm{display:flex;flex-direction:column;width:auto}\n", ":host{position:relative;margin:0;padding:0;background:lightgrey;width:100%;flex:1;overflow-y:auto;min-height:0px}\n", ".selected{font-weight:700}\n", "div{display:none;position:absolute;z-index:5}\n", "div.active{display:flex;position:absolute;bottom:0px;height:90%;width:100%;overflow:hidden;padding:0;z-index:200;box-sizing:border-box;background-color:#0000}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { recordingListComp: [{
+                type: ViewChild,
+                args: [RecordingList]
+            }], selectDisabled: [{
+                type: Input
+            }], selectedRecordingFileChanged: [{
+                type: Output
+            }], selectedRecordingFile: [{
+                type: Input
+            }], audioDisplay: [{
+                type: ViewChild,
+                args: [AudioDisplay, { static: true }]
+            }], audioSignalCollapsed: [{
+                type: Input
+            }], displayAudioClip: [{
+                type: Input
+            }], playStartAction: [{
+                type: Input
+            }], playSelectionAction: [{
+                type: Input
+            }], autoPlayOnSelectToggleAction: [{
+                type: Input
+            }], playStopAction: [{
+                type: Input
+            }] } });
+
+const RECFILE_API_CTX = 'recfile';
+const MAX_RECORDING_TIME_MS = 1000 * 60 * 60 * 60; // 1 hour
+const LEVEL_BAR_INTERVALL_SECONDS = 0.1; // 100ms
+class Item {
+    constructor(promptAsString, training) {
+        this.promptAsString = promptAsString;
+        this.training = training;
+        this.recs = null;
+    }
+}
+// TODO enum not possible in template language , use string for now
+//export enum StatusAlertType {INFO,WARN,ERROR};
+class AudioRecorder {
+    constructor(changeDetectorRef, route, renderer, dialog, projectService, sessionService, recFileService, uploader, config) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.route = route;
+        this.renderer = renderer;
+        this.dialog = dialog;
+        this.projectService = projectService;
+        this.sessionService = sessionService;
+        this.recFileService = recFileService;
+        this.uploader = uploader;
+        this.config = config;
+        this._project = null;
+        this.projectName = null;
+        this.enableUploadRecordings = true;
+        this.enableDownloadRecordings = false;
+        this.status = 0 /* BLOCKED */;
+        this.ac = null;
+        this._channelCount = 2; //TODO define constant for default format
+        this.dataSaved = true;
+        this.startedDate = null;
+        this.maxRecTimerId = null;
+        this.maxRecTimerRunning = false;
+        this._session = null;
+        this._promptIndex = null;
+        //items: Array<Item>|null=null;
+        //selectedItemIdx: number;
+        this._displayRecFile = null;
+        this.displayRecFileVersion = 0;
+        this.displayAudioClip = null;
+        this.displayLevelInfos = null;
+        this.peakLevelInDb = MIN_DB_LEVEL$1;
+        this.readonly = false;
+        this.statusMsg = '';
+        this.statusWaiting = false;
+        this.processingRecording = false;
+        this.uploadProgress = 100;
+        this.uploadStatus = 'ok';
+        this.audioSignalCollapsed = true;
+        this.audioFetchSubscription = null;
+        this.destroyed = false;
+        this.navigationDisabled = true;
+        this.status = 1 /* IDLE */;
+        this.transportActions = new TransportActions();
+        this.playStartAction = new Action('Play');
+        this.audio = document.getElementById('audio');
+        this.selCaptureDeviceId = null;
+        this.levelMeasure = new LevelMeasure();
+        this.streamLevelMeasure = new StreamLevelMeasure();
+        if (this.config && this.config.enableUploadRecordings != null) {
+            this.enableUploadRecordings = this.config.enableUploadRecordings;
+        }
+        if (this.config && this.config.enableDownloadRecordings != null) {
+            this.enableDownloadRecordings = this.config.enableDownloadRecordings;
+        }
+        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();
+        };
+    }
+    ngOnDestroy() {
+        this.destroyed = true;
+        // TODO stop capture /playback
+    }
+    init() {
+        this.transportActions.startAction.disabled = true;
+        this.transportActions.stopAction.disabled = true;
+        this.transportActions.nextAction.disabled = true;
+        this.transportActions.pauseAction.disabled = true;
+        this.playStartAction.disabled = true;
+        let context = null;
+        try {
+            context = AudioContextProvider.audioContextInstance();
+        }
+        catch (err) {
+            this.status = 4 /* ERROR */;
+            let errMsg = 'Unknown';
+            if (err instanceof Error) {
+                errMsg = err.message;
+            }
+            this.statusMsg = 'ERROR: ' + errMsg;
+            this.statusAlertType = 'error';
+            this.dialog.open(MessageDialog, {
+                data: {
+                    type: 'error',
+                    title: 'Error',
+                    msg: errMsg,
+                    advise: 'Please use a supported browser.',
+                }
+            });
+            return;
+        }
+        if (context) {
+            console.info("State of audio context: " + context.state);
+        }
+        if (!context || !navigator.mediaDevices) {
+            this.status = 4 /* ERROR */;
+            let errMsg = 'Browser does not support Media streams!';
+            this.statusMsg = 'ERROR: ' + errMsg;
+            this.statusAlertType = 'error';
+            this.dialog.open(MessageDialog, {
+                data: {
+                    type: 'error',
+                    title: 'Error',
+                    msg: errMsg,
+                    advise: 'Please use a supported browser.',
+                }
+            });
+            return;
+        }
+        else {
+            this.controlAudioPlayer = new AudioPlayer(context, this);
+            this.ac = new AudioCapture(context);
+            if (this.ac) {
+                this.transportActions.startAction.onAction = () => this.startItem();
+                this.ac.listener = this;
+                this.ac.audioOutStream = new SequenceAudioFloat32ChunkerOutStream(this.streamLevelMeasure, LEVEL_BAR_INTERVALL_SECONDS);
+                // Don't list the devices here. If we do not have audio permissions we only get anonymized devices without labels.
+                //this.ac.listDevices();
+            }
+            else {
+                this.transportActions.startAction.disabled = true;
+                let errMsg = 'Browser does not support Media/Audio API!';
+                this.statusMsg = 'ERROR: ' + errMsg;
+                this.statusAlertType = 'error';
+                this.dialog.open(MessageDialog, {
+                    data: {
+                        type: 'error',
+                        title: 'Error',
+                        msg: errMsg,
+                        advise: 'Please use a supported browser.',
+                    }
+                });
+                return;
+            }
+            this.transportActions.stopAction.onAction = () => this.stopItem();
+            this.transportActions.nextAction.onAction = () => this.stopItem();
+            //this.transportActions.pauseAction.onAction = () => this.pauseItem();
+            this.playStartAction.onAction = () => this.controlAudioPlayer.start();
+        }
+        this.uploader.listener = (ue) => {
+            this.uploadUpdate(ue);
+        };
+    }
+    onKeyPress(ke) {
+        if (ke.key == ' ') {
+            this.transportActions.startAction.perform();
+            this.transportActions.nextAction.perform();
+        }
+    }
+    onKeyDown(ke) {
+        if (ke.key == ' ' || ke.key == 'Escape') {
+            this.transportActions.stopAction.perform();
+        }
+        if (ke.key == 'p' || ke.key == 'Escape') {
+            this.transportActions.pauseAction.perform();
+        }
+        if (ke.key == 'MediaPlayPause') {
+            this.playStartAction.perform();
+        }
+        if (ke.key === 'ArrowRight') {
+            this.transportActions.fwdAction.perform();
+        }
+        if (ke.key === 'ArrowLeft') {
+            this.transportActions.bwdAction.perform();
+        }
+    }
+    isTestSession() {
+        return ((this._session != null) && (this._session.type === 'TEST' || this._session.type === 'TEST_DEF_A' || this._session.type === 'SINUS_TEST'));
+    }
+    isDefaultAudioTestSession() {
+        return ((this._session != null) && (this._session.type === 'TEST_DEF_A'));
+    }
+    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...';
+        this.statusWaiting = true;
+        let prNm = null;
+        if (this.project) {
+            let rfsObs = this.recFileService.recordingFileList(this.project.name, sess.sessionId);
+            rfsObs.subscribe((rfs) => {
+                this.statusAlertType = 'info';
+                this.statusMsg = 'Received infos of recordings.';
+                this.statusWaiting = false;
+                if (rfs) {
+                    if (rfs instanceof Array) {
+                        rfs.forEach((rf) => {
+                            //console.debug("Already recorded: " + rf+ " "+rf.recording.itemcode);
+                            //this.addRecordingFileByDescriptor(rf);
+                            this.recorderCombiPane.push(rf);
+                        });
+                    }
+                    else {
+                        console.error('Expected type array for list of already recorded files ');
+                    }
+                }
+                else {
+                    //console.debug("Recording file list: " + rfs);
+                }
+            }, () => {
+                // Failed fetching existing, but we start the session anyway
+                this.start();
+            }, () => {
+                // Normal start
+                this.start();
+            });
+        }
+        else {
+            // No project def -> error
+            this.statusAlertType = 'error';
+            this.statusMsg = 'No project definiton.';
+            this.statusWaiting = false;
+            console.error(this.statusMsg);
+        }
+    }
+    set project(project) {
+        this._project = project;
+        let chCnt = ProjectUtil.DEFAULT_AUDIO_CHANNEL_COUNT;
+        if (project) {
+            console.info("Project name: " + project.name);
+            this.audioDevices = project.audioDevices;
+            chCnt = ProjectUtil.audioChannelCount(project);
+            console.info("Project requested recording channel count: " + chCnt);
+            this.autoGainControlConfigs = project.autoGainControlConfigs;
+        }
+        else {
+            console.error("Empty project configuration!");
+        }
+        this.channelCount = chCnt;
+    }
+    get project() {
+        return this._project;
+    }
+    set autoGainControlConfigs(autoGainControlConfigs) {
+        this._autoGainControlConfigs = autoGainControlConfigs;
+    }
+    selectRecordingFile(rf) {
+        this.displayRecFile = rf;
+    }
+    uploadUpdate(ue) {
+        let upStatus = ue.status;
+        this.dataSaved = (UploaderStatus.DONE === upStatus);
+        let percentUpl = ue.percentDone();
+        if (UploaderStatus.ERR === upStatus) {
+            this.uploadStatus = 'warn';
+        }
+        else {
+            if (percentUpl < 50) {
+                this.uploadStatus = 'accent';
+            }
+            else {
+                this.uploadStatus = 'success';
+            }
+            this.uploadProgress = percentUpl;
+        }
+        this.changeDetectorRef.detectChanges();
+    }
+    set controlAudioPlayer(controlAudioPlayer) {
+        if (this._controlAudioPlayer) {
+            //this._controlAudioPlayer.listener=null;
+        }
+        this._controlAudioPlayer = controlAudioPlayer;
+        if (this._controlAudioPlayer) {
+            this._controlAudioPlayer.listener = this;
+        }
+    }
+    get controlAudioPlayer() {
+        return this._controlAudioPlayer;
+    }
+    set session(session) {
+        this._session = session;
+    }
+    get session() {
+        return this._session;
+    }
+    set channelCount(channelCount) {
+        this._channelCount = channelCount;
+    }
+    set audioDevices(audioDevices) {
+        this._audioDevices = audioDevices;
+    }
+    update(e) {
+        if (e.type == EventType.STARTED) {
+            this.playStartAction.disabled = true;
+            this.updateTimerId = window.setInterval(() => {
+                //this.audioSignal.playFramePosition = this.ap.playPositionFrames;
+            }, 50);
+        }
+        else if (e.type == EventType.STOPPED || e.type == EventType.ENDED) {
+            window.clearInterval(this.updateTimerId);
+            // this.audioSignal.playFramePosition = this.ap.playPositionFrames;
+            this.playStartAction.disabled = (!(this.displayRecFile));
+        }
+    }
+    startDisabled() {
+        return !this.transportActions || this.readonly || this.transportActions.startAction.disabled;
+    }
+    stopDisabled() {
+        return !this.transportActions || this.transportActions.stopAction.disabled;
+    }
+    startStopNextName() {
+        if (!this.startDisabled()) {
+            this.startStopNextButtonName = "Start";
+        }
+        else if (!this.stopDisabled()) {
+            this.startStopNextButtonName = "Stop";
+        }
+        return this.startStopNextButtonName;
+    }
+    startStopNextIconName() {
+        if (!this.startDisabled()) {
+            this.startStopNextButtonIconName = "fiber_manual_record";
+        }
+        else if (!this.stopDisabled()) {
+            this.startStopNextButtonIconName = "stop";
+        }
+        return this.startStopNextButtonIconName;
+    }
+    startStopNextIconColor() {
+        if (!this.startDisabled()) {
+            return "red";
+        }
+        else if (!this.stopDisabled()) {
+            return "yellow";
+        }
+        else {
+            return "grey";
+        }
+    }
+    startStopPerform() {
+        if (!this.startDisabled()) {
+            this.transportActions.startAction.perform();
+        }
+        else if (!this.stopDisabled()) {
+            this.transportActions.stopAction.perform();
+        }
+    }
+    startItem() {
+        this.transportActions.startAction.disabled = true;
+        this.transportActions.pauseAction.disabled = true;
+        if (this.readonly) {
+            return;
+        }
+        this.transportActions.fwdAction.disabled = true;
+        this.transportActions.fwdNextAction.disabled = true;
+        this.transportActions.bwdAction.disabled = true;
+        this.displayRecFile = null;
+        this.displayRecFileVersion = 0;
+        this.displayAudioClip = null;
+        this.showRecording();
+        if (this.ac) {
+            if (!this.ac.opened) {
+                if (this._selectedDeviceId) {
+                    console.log("Open session with audio device Id: \'" + this._selectedDeviceId + "\' for " + this._channelCount + " channels");
+                }
+                else {
+                    console.log("Open session with default audio device for " + this._channelCount + " channels");
+                }
+                this.ac.open(this._channelCount, this._selectedDeviceId, this._autoGainControlConfigs);
+            }
+            else {
+                this.ac.start();
+            }
+        }
+    }
+    downloadRecording() {
+        if (this.displayRecFile) {
+            let ab = this.displayRecFile.audioBuffer;
+            let ww = new WavWriter();
+            if (ab) {
+                let wavFile = ww.writeAsync(ab, (wavFile) => {
+                    let blob = new Blob([wavFile], { type: 'audio/wav' });
+                    let rfUrl = URL.createObjectURL(blob);
+                    let dataDnlLnk = this.renderer.createElement('a');
+                    //dataDnlLnk.name = 'Recording';
+                    dataDnlLnk.href = rfUrl;
+                    this.renderer.appendChild(document.body, dataDnlLnk);
+                    // download property not yet in TS def
+                    if (this.displayRecFile) {
+                        let fn = this.displayRecFile.filenameString();
+                        fn += '_' + this.displayRecFileVersion;
+                        fn += '.wav';
+                        dataDnlLnk.download = fn;
+                        dataDnlLnk.click();
+                    }
+                    this.renderer.removeChild(document.body, dataDnlLnk);
+                });
+            }
+        }
+    }
+    set displayRecFile(displayRecFile) {
+        this._displayRecFile = displayRecFile;
+        if (this._displayRecFile) {
+            let ab = this._displayRecFile.audioBuffer;
+            if (ab) {
+                this.displayAudioClip = new AudioClip(ab);
+                this.controlAudioPlayer.audioClip = this.displayAudioClip;
+            }
+            else {
+                // clear for now ...
+                this.displayAudioClip = null;
+                this.controlAudioPlayer.audioClip = null;
+                if (this._controlAudioPlayer && this._session) {
+                    //... and try to fetch from server
+                    this.audioFetchSubscription = this.recFileService.fetchAndApplyRecordingFile(this._controlAudioPlayer.context, this._session.project, this._displayRecFile).subscribe((rf) => {
+                        let fab = null;
+                        if (rf && this._displayRecFile) {
+                            fab = this._displayRecFile.audioBuffer;
+                        }
+                        else {
+                            this.statusMsg = 'Recording file could not be loaded.';
+                            this.statusAlertType = 'error';
+                        }
+                        if (fab) {
+                            this.displayAudioClip = new AudioClip(fab);
+                        }
+                        this.controlAudioPlayer.audioClip = this.displayAudioClip;
+                        this.showRecording();
+                    }, err => {
+                        console.error("Could not load recording file from server: " + err);
+                        this.statusMsg = 'Recording file could not be loaded: ' + err;
+                        this.statusAlertType = 'error';
+                    });
+                }
+                else {
+                    this.statusMsg = 'Recording file could not be decoded. Audio context unavailable.';
+                    this.statusAlertType = 'error';
+                }
+            }
+        }
+        else {
+            this.displayAudioClip = null;
+            this.controlAudioPlayer.audioClip = null;
+        }
+        this.showRecording();
+    }
+    get displayRecFile() {
+        return this._displayRecFile;
+    }
+    showRecording() {
+        this.controlAudioPlayer.stop();
+        if (this.displayAudioClip) {
+            this.levelMeasure.calcBufferLevelInfos(this.displayAudioClip.buffer, LEVEL_BAR_INTERVALL_SECONDS).then((levelInfos) => {
+                this.displayLevelInfos = levelInfos;
+                this.changeDetectorRef.detectChanges();
+            });
+            this.playStartAction.disabled = false;
+        }
+        else {
+            // TODO
+            // Setting to null does not trigger a change if it was  null before (happens after nextitem() in AUTOPROGRESS mode)
+            // The level bar display does not clear, it shows the last captured stream
+            this.displayLevelInfos = null;
+            this.playStartAction.disabled = true;
+            // Collapse audio signal display if open
+            if (!this.audioSignalCollapsed) {
+                this.audioSignalCollapsed = true;
+            }
+        }
+        this.changeDetectorRef.detectChanges();
+    }
+    updateStartActionDisableState() {
+        this.transportActions.startAction.disabled = !(this.ac);
+    }
+    start() {
+        this.statusAlertType = 'info';
+        this.statusMsg = 'Starting session...';
+        this.statusWaiting = false;
+        if (this._session) {
+            if (this._session.sealed) {
+                this.readonly = true;
+                this.statusMsg = 'Session sealed!';
+                //let dialogRef = this.dialog.open(SessionSealedDialog, {});
+                this.dialog.open(MessageDialog, {
+                    data: {
+                        type: 'error',
+                        title: 'Error',
+                        msg: "This session is sealed. Recordings cannot be added anymore.",
+                        advise: 'Please ask your experimenter what to do (e.g start a new session).',
+                    }
+                });
+            }
+            else {
+                let body = {};
+                if (this._session.status === "CREATED") {
+                    this._session.status = "LOADED";
+                    body.status = this._session.status;
+                    if (!this._session.loadedDate) {
+                        this._session.loadedDate = new Date();
+                        body.loadedDate = this._session.loadedDate;
+                    }
+                }
+                else {
+                    this._session.restartedDate = new Date();
+                    body.restartedDate = this._session.restartedDate;
+                }
+                this.sessionService.patchSessionObserver(this._session, body).subscribe();
+            }
+        }
+        //console.log("Session ID: "+this._session.session+ " status: "+this._session.status)
+        this._selectedDeviceId = undefined;
+        if (!this.readonly && this.ac) {
+            this.statusMsg = 'Requesting audio permissions...';
+            this.statusAlertType = 'info';
+            this.ac.deviceInfos((mdis) => {
+                let audioCaptureDeviceAvail = false;
+                let audioPlayDeviceAvail = false;
+                if (mdis && this.ac) {
+                    this.ac.printDevices(mdis);
+                    if (mdis.length > 0) {
+                        for (let mdii = 0; mdii < mdis.length; mdii++) {
+                            let mdi = mdis[mdii];
+                            let kind = mdi.kind;
+                            if (kind === "audioinput") {
+                                audioCaptureDeviceAvail = true;
+                            }
+                            else if (kind === "audiooutput") {
+                                audioPlayDeviceAvail = true;
+                            }
+                        }
+                    }
+                    if (this._session && this._session.type !== 'TEST_DEF_A' && this._audioDevices && this._audioDevices.length > 0) {
+                        let fdi = null;
+                        for (let adI = 0; adI < this._audioDevices.length; adI++) {
+                            let ad = this._audioDevices[adI];
+                            if (ad.playback) {
+                                // project audio device config for playback device
+                                // not used for now
+                                continue;
+                            }
+                            for (let mdii = 0; mdii < mdis.length; mdii++) {
+                                let mdi = mdis[mdii];
+                                let kind = mdi.kind;
+                                if (kind === "audioinput") {
+                                    audioCaptureDeviceAvail = true;
+                                }
+                                else if (kind === "audiooutput") {
+                                    audioPlayDeviceAvail = true;
+                                }
+                                if (ad.regex) {
+                                    //console.log("Match?: \'"+mdi.label+"\' \'"+ad.name+"\'");
+                                    if (mdi.label.match(ad.name)) {
+                                        fdi = mdi;
+                                        //console.log("Match!");
+                                    }
+                                }
+                                else {
+                                    if (mdi.label.trim() === ad.name.trim()) {
+                                        fdi = mdi;
+                                    }
+                                }
+                                if (fdi) {
+                                    break;
+                                }
+                            }
+                            if (fdi) {
+                                break;
+                            }
+                        }
+                        if (fdi) {
+                            // matching device found
+                            // Not able to open device here since Chrome 71
+                            // Chrome 71 requires a user gesture before the AudioContext can be resumed
+                            // sessionmanager.ts:712 Open session with default audio device for 1 channels
+                            // capture.ts:128 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
+                            // push../projects/speechrecorderng/src/lib/audio/capture/capture.ts.AudioCapture.open @ capture.ts:128
+                            //this.ac.open(this._channelCount, fdi.deviceId);
+                            console.info("Set selected audio device: \'" + fdi.label + "\' Id: \'" + fdi.deviceId + "\'");
+                            this._selectedDeviceId = fdi.deviceId;
+                            this.enableStartUserGesture();
+                        }
+                        else {
+                            // device not found
+                            this.statusMsg = 'ERROR: Required audio device not available!';
+                            this.statusAlertType = 'error';
+                            this.readonly = true;
+                            this.dialog.open(MessageDialog, {
+                                data: {
+                                    type: 'error',
+                                    title: 'Required audio device',
+                                    msg: "Required audio device not found",
+                                    advice: "Please connect a suitable audio device for this project and retry (press the browser reload button)."
+                                }
+                            });
+                        }
+                    }
+                    else {
+                        if (!audioCaptureDeviceAvail && !audioPlayDeviceAvail) {
+                            // no device found
+                            this.statusMsg = 'ERROR: No audio device available!';
+                            this.statusAlertType = 'warn';
+                            //this.readonly = true;
+                            this.dialog.open(MessageDialog, {
+                                data: {
+                                    type: 'warn',
+                                    title: 'No audio device',
+                                    msg: "No audio device found",
+                                    advice: "Please connect an audio device and retry (press the browser reload button) or try to continue anyway."
+                                }
+                            });
+                        }
+                        else {
+                            if (!this.readonly && !audioCaptureDeviceAvail) {
+                                // no device found
+                                this.statusMsg = 'WARNING: No audio capture device available!';
+                                this.statusAlertType = 'warning';
+                                //this.readonly = true;
+                                this.dialog.open(MessageDialog, {
+                                    data: {
+                                        type: 'warning',
+                                        title: 'No audio capture device',
+                                        msg: "No audio capture device found",
+                                        advice: "Please connect an audio capture device and retry (press the browser reload button) or try to continue anyway."
+                                    }
+                                });
+                            }
+                            if (!audioPlayDeviceAvail) {
+                                // Firefox does not enumerate audiooutput devices
+                                // Do not show this warning, because it would always appear on Firefox
+                                // When https://bugzilla.mozilla.org/show_bug.cgi?id=1498512 is fixed the warning can be enabled for Firefox as well
+                                // It is already implemneted but kept behind a preference setting https://bugzilla.mozilla.org/show_bug.cgi?id=1152401
+                                // Output devices are listed if about:config media.setsinkid.enabled=true
+                                // but default setting is false
+                                if (!navigator.userAgent.match(".*Firefox.*")) {
+                                    // no device found
+                                    this.statusMsg = 'WARNING: No audio playback device available!';
+                                    this.statusAlertType = 'warn';
+                                    //this.readonly = true;
+                                    this.dialog.open(MessageDialog, {
+                                        data: {
+                                            type: 'warn',
+                                            title: 'No audio playback device',
+                                            msg: "No audio playback device found",
+                                            advice: "Please connect an audio playback device and retry (press the browser reload button) or try to continue anyway."
+                                        }
+                                    });
+                                }
+                            }
+                        }
+                        // Not able to open device here since Chrome 71
+                        // Chrome 71 requires a user gesture before the AudioContext can be resumed
+                        // sessionmanager.ts:712 Open session with default audio device for 1 channels
+                        // capture.ts:128 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
+                        // push../projects/speechrecorderng/src/lib/audio/capture/capture.ts.AudioCapture.open @ capture.ts:128
+                        //console.log("Open session with default audio device for "+this._channelCount+" channels");
+                        //this.ac.open(this._channelCount);
+                        // enable start gesture anyway
+                        this.enableStartUserGesture();
+                    }
+                }
+            });
+        }
+        if (this.recorderCombiPane.recordingListComp.recordingList.length > 0) {
+            this.selectRecordingFile(this.recorderCombiPane.recordingListComp.recordingList[0]);
+        }
+        this.enableNavigation();
+    }
+    isRecording() {
+        return (this.status === 2 /* RECORDING */);
+    }
+    isActive() {
+        return (!(this.status === 0 /* BLOCKED */ || this.status === 1 /* IDLE */ || this.status === 4 /* ERROR */) || this.processingRecording || this.sessionService.uploadCount > 0);
+    }
+    updateNavigationActions() {
+        this.transportActions.fwdAction.disabled = this.navigationDisabled;
+        this.transportActions.bwdAction.disabled = this.navigationDisabled;
+    }
+    enableStartUserGesture() {
+        this.statusAlertType = 'info';
+        this.statusMsg = 'Ready.';
+        //this.updateStartActionDisableState()
+        this.transportActions.startAction.disabled = !(this.ac);
+    }
+    enableNavigation() {
+        this.navigationDisabled = false;
+        this.updateNavigationActions();
+    }
+    opened() {
+        if (this.ac) {
+            this.ac.start();
+        }
+    }
+    started() {
+        this.startedDate = new Date();
+        this.transportActions.startAction.disabled = true;
+        this.statusAlertType = 'info';
+        this.statusMsg = 'Recording...';
+        let maxRecordingTimeMs = MAX_RECORDING_TIME_MS;
+        this.maxRecTimerId = window.setTimeout(() => {
+            this.stopRecordingMaxRec();
+        }, maxRecordingTimeMs);
+        this.maxRecTimerRunning = true;
+        this.status = 2 /* RECORDING */;
+        this.transportActions.stopAction.disabled = false;
+    }
+    stopItem() {
+        this.transportActions.stopAction.disabled = true;
+        this.transportActions.nextAction.disabled = true;
+        this.status = 3 /* STOPPING_STOP */;
+        this.stopRecording();
+    }
+    stopRecording() {
+        if (this.maxRecTimerRunning && this.maxRecTimerId != null) {
+            window.clearTimeout(this.maxRecTimerId);
+            this.maxRecTimerRunning = false;
+        }
+        if (this.ac) {
+            this.ac.stop();
+        }
+    }
+    stopRecordingMaxRec() {
+        this.maxRecTimerRunning = false;
+        this.status = 3 /* STOPPING_STOP */;
+        if (this.ac) {
+            this.ac.stop();
+        }
+    }
+    // addRecordingFileByDescriptor(rfd:RecordingFileDescriptorImpl){
+    //    let prIdx=0;
+    //    if(this.items) {
+    //      let it = this.items[prIdx];
+    //      if (it) {
+    //        if (!it.recs) {
+    //          it.recs = new Array<SprRecordingFile>();
+    //        }
+    //
+    //      } else {
+    //        //console.debug("WARN: No recording item with code: \"" +rfd.recording.itemcode+ "\" found.");
+    //      }
+    //    }
+    // }
+    //
+    // addRecordingFileByPromptIndex(promptIndex:number, rf:SprRecordingFile){
+    //
+    // }
+    stopped() {
+        this.updateStartActionDisableState();
+        this.transportActions.stopAction.disabled = true;
+        this.transportActions.nextAction.disabled = true;
+        this.transportActions.pauseAction.disabled = true;
+        this.statusAlertType = 'info';
+        this.statusMsg = 'Recorded.';
+        //this.startStopSignalState = StartStopSignalState.IDLE;
+        let ad;
+        if (this.ac) {
+            ad = this.ac.audioBuffer();
+            //}
+            //if (this._session && this._promptIndex ) {
+            let sessId = 0;
+            if (this._session) {
+                sessId = this._session.sessionId;
+            }
+            // let cpIdx = this._promptIndex;
+            // let it = this.items[cpIdx];
+            // if (!it.recs) {
+            //   it.recs = new Array<RecordingFile>();
+            // }
+            let rf = new RecordingFile(UUID.generate(), sessId, ad);
+            rf.startedDate = this.startedDate;
+            // it.recs.push(rf);
+            //
+            // if (this.enableUploadRecordings) {
+            //   // TODO use SpeechRecorderconfig resp. RecfileService
+            //   //new REST API URL
+            //
+            let apiEndPoint = '';
+            if (this.config && this.config.apiEndPoint) {
+                apiEndPoint = this.config.apiEndPoint;
+            }
+            if (apiEndPoint !== '') {
+                apiEndPoint = apiEndPoint + '/';
+            }
+            let sessionsUrl = apiEndPoint + SessionService.SESSION_API_CTX;
+            let recUrl = sessionsUrl + '/' + rf.session + '/' + RECFILE_API_CTX + '/' + rf.uuid;
+            //
+            //
+            //
+            //     // convert asynchronously to 16-bit integer PCM
+            //     // TODO could we avoid conversion to save CPU resources and transfer float PCM directly?
+            //     // TODO duplicate conversion for manual download
+            //     //console.log("Build wav writer...");
+            this.processingRecording = true;
+            let ww = new WavWriter();
+            ww.writeAsync(ad, (wavFile) => {
+                //this.postRecording(wavFile, recUrl);
+                //rf._dateAsDateObj=new Date();
+                rf.frames = ad.length;
+                this.displayRecFile = rf;
+                //this.recordingListComp.recordingList.push(rf);
+                this.recorderCombiPane.push(rf);
+                this.postRecordingMultipart(wavFile, rf.uuid, rf.session, rf.startedDate, recUrl);
+                this.processingRecording = false;
+                this.changeDetectorRef.detectChanges();
+            });
+            // }
+        }
+        // check complete session
+        let complete = true;
+        let autoStart = (this.status === 3 /* STOPPING_STOP */);
+        this.status = 1 /* IDLE */;
+        let startNext = false;
+        this.navigationDisabled = false;
+        this.updateNavigationActions();
+        this.changeDetectorRef.detectChanges();
+    }
+    postRecording(wavFile, recUrl) {
+        let wavBlob = new Blob([wavFile], { type: 'audio/wav' });
+        let ul = new Upload(wavBlob, recUrl);
+        this.uploader.queueUpload(ul);
+    }
+    postRecordingMultipart(wavFile, uuid, sessionId, startedDate, recUrl) {
+        let wavBlob = new Blob([wavFile], { type: 'audio/wav' });
+        let fd = new FormData();
+        if (uuid) {
+            fd.set('uuid', uuid);
+        }
+        if (sessionId !== null) {
+            fd.set('sessionId', sessionId.toString());
+        }
+        if (startedDate) {
+            fd.set('startedDate', startedDate.toJSON());
+        }
+        fd.set('audio', wavBlob);
+        let ul = new Upload(fd, recUrl);
+        this.uploader.queueUpload(ul);
+    }
+    stop() {
+        if (this.ac) {
+            this.ac.close();
+        }
+    }
+    updateControlPlaybackPosition() {
+        if (this._controlAudioPlayer.playPositionFrames) {
+            this.recorderCombiPane.audioDisplay.playFramePosition = this._controlAudioPlayer.playPositionFrames;
+            this.liveLevelDisplay.playFramePosition = this._controlAudioPlayer.playPositionFrames;
+        }
+    }
+    audioPlayerUpdate(e) {
+        if (EventType.READY === e.type) {
+        }
+        else if (EventType.STARTED === e.type) {
+            //this.status = 'Playback...';
+            this.updateTimerId = window.setInterval(() => this.updateControlPlaybackPosition(), 50);
+        }
+        else if (EventType.ENDED === e.type) {
+            //.status='Ready.';
+            window.clearInterval(this.updateTimerId);
+        }
+        if (!this.destroyed) {
+            this.changeDetectorRef.detectChanges();
+        }
+    }
+    closed() {
+        this.statusAlertType = 'info';
+        this.statusMsg = 'Session closed.';
+    }
+    error(msg = 'An unknown error occured during recording.', advice = 'Please retry.') {
+        this.statusMsg = 'ERROR: Recording.';
+        this.statusAlertType = 'error';
+        this.dialog.open(MessageDialog, {
+            data: {
+                type: 'error',
+                title: 'Recording error',
+                msg: msg,
+                advice: advice
+            }
+        });
+    }
+}
+AudioRecorder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioRecorder, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.ActivatedRoute }, { token: i0.Renderer2 }, { token: i1$3.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.2.1", 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 }], 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>
+    <app-recordercombipane (selectedRecordingFileChanged)="selectRecordingFile($event)"
+                           [audioSignalCollapsed]="audioSignalCollapsed"
+                           [selectedRecordingFile]="displayRecFile"
+                           [selectDisabled]="isActive()"
+                           [displayAudioClip]="displayAudioClip"
+                           [playStartAction]="controlAudioPlayer.startAction"
+                           [playStopAction]="controlAudioPlayer.stopAction"
+                           [playSelectionAction]="controlAudioPlayer.startSelectionAction"
+                           [autoPlayOnSelectToggleAction]="controlAudioPlayer.autoPlayOnSelectToggleAction"
+    ></app-recordercombipane>
+
+    <div fxLayout="row" fxLayout.xs="column" [ngStyle]="{'height.px':100,'min-height.px': 100}"
+         [ngStyle.xs]="{'height.px':125,'min-height.px': 125}">
+      <audio-levelbar fxFlex="1 0 1" [streamingMode]="isRecording()"
+                      [displayLevelInfos]="displayLevelInfos"></audio-levelbar>
+      <div fxLayout="row">
+        <spr-recordingitemcontrols fxFlex="10 0 1"
+                                   [audioLoaded]="displayAudioClip?.buffer!==null"
+                                   [playStartAction]="controlAudioPlayer?.startAction"
+                                   [playStopAction]="controlAudioPlayer?.stopAction"
+                                   [peakDbLvl]="peakLevelInDb"
+                                   [agc]="this.ac?.agcStatus"
+                                   (onShowRecordingDetails)="audioSignalCollapsed=!audioSignalCollapsed">
+        </spr-recordingitemcontrols>
+        <app-uploadstatus class="ricontrols dark" fxHide fxShow.xs fxFlex="0 0 0" *ngIf="enableUploadRecordings"
+                          [value]="uploadProgress"
+                          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
+        <app-readystateindicator class="ricontrols dark" fxHide fxShow.xs fxFlex="0 0 0"
+                                 [ready]="dataSaved && !isActive()"></app-readystateindicator>
+      </div>
+    </div>
+    <div #controlpanel class="controlpanel" fxLayout="row">
+      <app-sprstatusdisplay fxHide.xs fxFlex="30% 1 30%" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType"
+                            [statusWaiting]="statusWaiting"
+                            class="hidden-xs"></app-sprstatusdisplay>
+      <div fxFlex="100% 0 100%" class="startstop">
+        <div style="align-content: center">
+        <button (click)="startStopPerform()" [disabled]="startDisabled() && stopDisabled()" mat-raised-button class="bigbutton">
+          <mat-icon [style.color]="startStopNextIconColor()" inline="true">{{startStopNextIconName()}}</mat-icon>
+          <span style="font-weight: bolder;font-size: 14px">{{startStopNextName()}}</span>
+        </button>
+        </div>
+      </div>
+      <div fxFlex="30% 1 30%" >
+        <div fxFlex="1 1 auto"></div>
+        <app-uploadstatus class="ricontrols" fxHide.xs fxFlex="0 0 0" *ngIf="enableUploadRecordings"
+                          [value]="uploadProgress"
+                          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
+        <app-readystateindicator class="ricontrols" fxHide.xs
+                                 [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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AudioRecorder, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-audiorecorder',
+                    providers: [SessionService],
+                    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>
+    <app-recordercombipane (selectedRecordingFileChanged)="selectRecordingFile($event)"
+                           [audioSignalCollapsed]="audioSignalCollapsed"
+                           [selectedRecordingFile]="displayRecFile"
+                           [selectDisabled]="isActive()"
+                           [displayAudioClip]="displayAudioClip"
+                           [playStartAction]="controlAudioPlayer.startAction"
+                           [playStopAction]="controlAudioPlayer.stopAction"
+                           [playSelectionAction]="controlAudioPlayer.startSelectionAction"
+                           [autoPlayOnSelectToggleAction]="controlAudioPlayer.autoPlayOnSelectToggleAction"
+    ></app-recordercombipane>
+
+    <div fxLayout="row" fxLayout.xs="column" [ngStyle]="{'height.px':100,'min-height.px': 100}"
+         [ngStyle.xs]="{'height.px':125,'min-height.px': 125}">
+      <audio-levelbar fxFlex="1 0 1" [streamingMode]="isRecording()"
+                      [displayLevelInfos]="displayLevelInfos"></audio-levelbar>
+      <div fxLayout="row">
+        <spr-recordingitemcontrols fxFlex="10 0 1"
+                                   [audioLoaded]="displayAudioClip?.buffer!==null"
+                                   [playStartAction]="controlAudioPlayer?.startAction"
+                                   [playStopAction]="controlAudioPlayer?.stopAction"
+                                   [peakDbLvl]="peakLevelInDb"
+                                   [agc]="this.ac?.agcStatus"
+                                   (onShowRecordingDetails)="audioSignalCollapsed=!audioSignalCollapsed">
+        </spr-recordingitemcontrols>
+        <app-uploadstatus class="ricontrols dark" fxHide fxShow.xs fxFlex="0 0 0" *ngIf="enableUploadRecordings"
+                          [value]="uploadProgress"
+                          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
+        <app-readystateindicator class="ricontrols dark" fxHide fxShow.xs fxFlex="0 0 0"
+                                 [ready]="dataSaved && !isActive()"></app-readystateindicator>
+      </div>
+    </div>
+    <div #controlpanel class="controlpanel" fxLayout="row">
+      <app-sprstatusdisplay fxHide.xs fxFlex="30% 1 30%" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType"
+                            [statusWaiting]="statusWaiting"
+                            class="hidden-xs"></app-sprstatusdisplay>
+      <div fxFlex="100% 0 100%" class="startstop">
+        <div style="align-content: center">
+        <button (click)="startStopPerform()" [disabled]="startDisabled() && stopDisabled()" mat-raised-button class="bigbutton">
+          <mat-icon [style.color]="startStopNextIconColor()" inline="true">{{startStopNextIconName()}}</mat-icon>
+          <span style="font-weight: bolder;font-size: 14px">{{startStopNextName()}}</span>
+        </button>
+        </div>
+      </div>
+      <div fxFlex="30% 1 30%" >
+        <div fxFlex="1 1 auto"></div>
+        <app-uploadstatus class="ricontrols" fxHide.xs fxFlex="0 0 0" *ngIf="enableUploadRecordings"
+                          [value]="uploadProgress"
+                          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
+        <app-readystateindicator class="ricontrols" fxHide.xs
+                                 [ready]="dataSaved && !isActive()"></app-readystateindicator>
+      </div>
+    </div>
+  `,
+                    styles: [`:host {
+    flex: 2;
+    background: lightgrey;
+    display: flex; /* Vertical flex container: Bottom transport panel, above prompting panel */
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    min-height: 0px;
+
+      /* Prevents horizontal scroll bar on swipe right */
+      overflow: hidden;
+  }`, `.ricontrols {
+        padding: 4px;
+        box-sizing: border-box;
+        height: 100%;
+    }`, `.dark {
+    background: darkgray;
+  }`, `.controlpanel {
+    align-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 20px;
+    min-height: min-content; /* important */
+  }`, `.startstop {
+    width: 100%;
+    text-align: center;
+    align-content: center;
+    align-items: center;
+  }`, `.bigbutton {
+    min-width: 70px;
+    min-height: 50px;
+    font-size: 50px;
+    border-radius: 20px;
+  }`
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.ActivatedRoute }, { type: i0.Renderer2 }, { type: i1$3.MatDialog }, { type: ProjectService }, { type: SessionService }, { type: RecordingService }, { type: SpeechRecorderUploader }, { type: SpeechRecorderConfig, decorators: [{
+                    type: Inject,
+                    args: [SPEECHRECORDER_CONFIG]
+                }] }]; }, propDecorators: { projectName: [{
+                type: Input
+            }], recorderCombiPane: [{
+                type: ViewChild,
+                args: [RecorderCombiPane, { static: true }]
+            }], liveLevelDisplay: [{
+                type: ViewChild,
+                args: [LevelBar, { static: true }]
+            }], dataSaved: [{
+                type: Input
+            }], onKeyPress: [{
+                type: HostListener,
+                args: ['window:keypress', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['window:keydown', ['$event']]
+            }] } });
+
 const SPR_ROUTES = [
     { path: 'spr/session/:id', component: SpeechrecorderngComponent },
+    { path: 'recorder', component: AudioRecorder },
     { 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 },
@@ -10352,25 +11933,22 @@ class SpeechrecorderngModule {
         };
     }
 }
-SpeechrecorderngModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SpeechrecorderngModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SpeechrecorderngModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", 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, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent], 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] });
-SpeechrecorderngModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", 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: "12.2.13", ngImport: i0, type: SpeechrecorderngModule, decorators: [{
+SpeechrecorderngModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SpeechrecorderngModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpeechrecorderngModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", 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] });
+SpeechrecorderngModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", 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.2.1", 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, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent],
-                    entryComponents: [
-                        MessageDialog, SessionFinishedDialog
-                    ],
-                    exports: [MessageDialog, SpeechrecorderngComponent, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar],
+                        ProgressDisplay, RecordingItemDisplay, RecordingItemControls, UploadStatus, TransportPanel, ReadyStateIndicator, ControlPanel, WarningBar, AudioRecorder, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, 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.21.4';
+const VERSION = '2.22.0';
 
 /*
  * Public API Surface of speechrecorderng
@@ -10380,5 +11958,5 @@ const VERSION = '2.21.4';
  * Generated bundle index. Do not edit.
  */
 
-export { Action, ApiType, AudioClip, AudioClipUIContainer, AudioContextProvider, AudioDisplay, AudioDisplayControl, AudioDisplayPlayer, AudioDisplayScrollPane, AudioPlayer, AudioPlayerEvent, EventType, LevelBar, MessageDialog, ProjectService, RecordingFile, RecordingFileService, RecordingFileUI, RecordingFileViewComponent, RecordingService, SPEECHRECORDER_CONFIG, ScriptService, ScrollPaneHorizontal, Selection, SessionService, SpeechRecorderConfig, SpeechrecorderngComponent, SpeechrecorderngModule, UUID, VERSION };
-//# sourceMappingURL=speechrecorderng.js.map
+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 };
+//# sourceMappingURL=speechrecorderng.mjs.map