speechrecorderng 2.22.0 → 2.22.4

package/fesm2020/speechrecorderng.mjs

@@ -1448,6 +1448,7 @@ class RecordingFile {
         this.date = null;
         this._dateAsDateObj = null;
         this.startedDate = null;
+        this._startedAsDateObj = null;
         this.audioBuffer = null;
         this.session = null;
         this.frames = null;
@@ -2297,7 +2298,7 @@ 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{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 } });
+    `, 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", "button{touch-action:manipulation}\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: [{
@@ -2342,7 +2343,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
         display: inline-block;
         white-space: nowrap;
         box-sizing: border-box;
-    }`]
+    }`, `
+     button {
+       touch-action: manipulation;
+     }`]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { audioSignalCollapsed: [{
                 type: Input
@@ -6275,9 +6279,9 @@ class PromptingContainer {
                     this.touchStartTimeStamp = ev.timeStamp;
                     this.e.style.transition = 'none';
                     //console.log("Touch start x: "+this.startX)
+                    //ev.preventDefault();
                 }
             }
-            ev.preventDefault();
         }
     }
     onTouchEnd(ev) {
@@ -6319,6 +6323,7 @@ class PromptingContainer {
                     }
                     else {
                     }
+                    ev.preventDefault();
                 }
             }
             // reset animated
@@ -6327,7 +6332,6 @@ class PromptingContainer {
         this.startX = null;
         this.touchStartTimeStamp = null;
         this.e.style.left = "0px";
-        ev.preventDefault();
     }
     onTouchMove(ev) {
         //console.log("Touch move!")
@@ -6342,14 +6346,14 @@ class PromptingContainer {
                     this.e.style.left = deltaX + "px";
                     // console.log("Touch move delta x: "+deltaX)
                 }
+                ev.preventDefault();
             }
-            ev.preventDefault();
         }
     }
     onTouchCancel(ev) {
         //console.log("Touch cancel!")
         this.e.style.left = "0px";
-        ev.preventDefault();
+        //ev.preventDefault();
     }
 }
 PromptingContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: PromptingContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -6938,7 +6942,7 @@ TransportPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
       <mat-icon>chevron_right</mat-icon>
     </button>
 
-  `, 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"] }] });
+  `, 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", "button{touch-action:manipulation}\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: [{
@@ -6976,7 +6980,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
     div {
       display: inline;
       flex: 0;
-    }`
+    }`, `
+     button {
+       touch-action: manipulation;
+     }`
                     ]
                 }]
         }], propDecorators: { readonly: [{
@@ -7712,10 +7719,17 @@ class SessionManager {
         }
     }
     onKeyDown(ke) {
-        if (ke.key == ' ' || ke.key == 'Escape') {
+        if (ke.key == ' ') {
             this.transportActions.stopAction.perform();
         }
-        if (ke.key == 'p' || ke.key == 'Escape') {
+        if (ke.key == 'p') {
+            this.transportActions.pauseAction.perform();
+        }
+        if (ke.key == 'Escape') {
+            if (!this.audioSignalCollapsed) {
+                this.audioSignalCollapsed = true;
+            }
+            this.transportActions.stopAction.perform();
             this.transportActions.pauseAction.perform();
         }
         if (ke.key == 'MediaPlayPause') {
@@ -10643,15 +10657,44 @@ class RecordingList {
         this.recordingListDataSource = new MatTableDataSource();
     }
     ngAfterViewInit() {
-        this.recordingListDataSource.data = this.recordingList.reverse();
+        this.buildDataSource();
+    }
+    buildDataSource() {
+        this.recordingList.sort((a, b) => {
+            let cmp = 0;
+            let aD = null;
+            let bD = null;
+            if (a._startedAsDateObj && b._startedAsDateObj) {
+                aD = a._startedAsDateObj;
+                bD = b._startedAsDateObj;
+            }
+            else if (a.startedDate && b.startedDate) {
+                aD = new Date(a.startedDate);
+                bD = new Date(b.startedDate);
+            }
+            else if (a.date && b.date) {
+                aD = new Date(a.date);
+                bD = new Date(b.date);
+            }
+            if (aD !== null && bD !== null) {
+                cmp = bD.getTime() - aD.getTime();
+            }
+            return cmp;
+        });
+        this.recordingListDataSource.data = this.recordingList;
     }
     push(rf) {
         this.recordingList.push(rf);
-        this.recordingListDataSource.data = this.recordingList.reverse();
+        this.buildDataSource();
     }
     selectRecordingFile(rf) {
         this.selectedRecordingFileChanged.emit(rf);
     }
+    selectTop() {
+        if (this.recordingList.length > 0) {
+            this.selectRecordingFile(this.recordingList[0]);
+        }
+    }
     lengthTimeFormatted(rf) {
         let str = '--:--:--';
         if (rf.frames && rf.audioBuffer) {
@@ -10671,15 +10714,15 @@ RecordingList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
       <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>
+        <th mat-header-cell *matHeaderCellDef mat-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>
+        <th mat-header-cell *matHeaderCellDef mat-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>
+        <th mat-header-cell *matHeaderCellDef mat-header>Length</th>
         <td mat-cell class="monospaced" *matCellDef="let element">{{lengthTimeFormatted(element)}}</td>
       </ng-container>
       <ng-container matColumnDef="action">
@@ -10703,15 +10746,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
       <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>
+        <th mat-header-cell *matHeaderCellDef mat-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>
+        <th mat-header-cell *matHeaderCellDef mat-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>
+        <th mat-header-cell *matHeaderCellDef mat-header>Length</th>
         <td mat-cell class="monospaced" *matCellDef="let element">{{lengthTimeFormatted(element)}}</td>
       </ng-container>
       <ng-container matColumnDef="action">
@@ -10747,11 +10790,16 @@ class RecorderCombiPane {
     selectRecordingFile(rf) {
         this.selectedRecordingFileChanged.emit(rf);
     }
+    selectTop() {
+        this.recordingListComp.selectTop();
+    }
 }
 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">
+    <div class="scrollList">
+        <app-recordinglist [selectedRecordingFile]="selectedRecordingFile" [selectDisabled]="selectDisabled" (selectedRecordingFileChanged)="selectRecordingFile($event)"></app-recordinglist>
+    </div>
+    <div class="collapsable" fxHide.xs #asCt [class.active]="!audioSignalCollapsed">
       <app-audiodisplay #audioSignalContainer [class.active]="!audioSignalCollapsed"
                         [audioClip]="displayAudioClip"
                         [playStartAction]="playStartAction"
@@ -10759,12 +10807,14 @@ RecorderCombiPane.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                         [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"] }] });
+  `, 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{background-color:#ff0;position:relative;margin:0;padding:0;background:lightgrey;width:100%;flex:1;min-height:0px}\n", ".scrollList{margin:0;padding:0;background:lightgrey;width:100%;height:100%;overflow-y:auto}\n", ".collapsable{display:none;position:absolute;z-index:5}\n", ".collapsable.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">
+    <div class="scrollList">
+        <app-recordinglist [selectedRecordingFile]="selectedRecordingFile" [selectDisabled]="selectDisabled" (selectedRecordingFileChanged)="selectRecordingFile($event)"></app-recordinglist>
+    </div>
+    <div class="collapsable" fxHide.xs #asCt [class.active]="!audioSignalCollapsed">
       <app-audiodisplay #audioSignalContainer [class.active]="!audioSignalCollapsed"
                         [audioClip]="displayAudioClip"
                         [playStartAction]="playStartAction"
@@ -10772,7 +10822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
                         [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"] }]
+  `, 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{background-color:#ff0;position:relative;margin:0;padding:0;background:lightgrey;width:100%;flex:1;min-height:0px}\n", ".scrollList{margin:0;padding:0;background:lightgrey;width:100%;height:100%;overflow-y:auto}\n", ".collapsable{display:none;position:absolute;z-index:5}\n", ".collapsable.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]
@@ -10965,15 +11015,27 @@ class AudioRecorder {
     }
     onKeyPress(ke) {
         if (ke.key == ' ') {
-            this.transportActions.startAction.perform();
-            this.transportActions.nextAction.perform();
+            //this.transportActions.startAction.perform();
+            //this.transportActions.nextAction.perform();
         }
     }
     onKeyDown(ke) {
-        if (ke.key == ' ' || ke.key == 'Escape') {
-            this.transportActions.stopAction.perform();
+        if (ke.key == ' ') {
+            if (!this.transportActions.startAction.disabled) {
+                this.transportActions.startAction.perform();
+            }
+            else if (!this.transportActions.stopAction.disabled) {
+                this.transportActions.stopAction.perform();
+            }
         }
-        if (ke.key == 'p' || ke.key == 'Escape') {
+        if (ke.key == 'p') {
+            this.transportActions.pauseAction.perform();
+        }
+        if (ke.key == 'Escape') {
+            if (!this.audioSignalCollapsed) {
+                this.audioSignalCollapsed = true;
+            }
+            this.transportActions.stopAction.perform();
             this.transportActions.pauseAction.perform();
         }
         if (ke.key == 'MediaPlayPause') {
@@ -11046,8 +11108,12 @@ class AudioRecorder {
                 if (rfs) {
                     if (rfs instanceof Array) {
                         rfs.forEach((rf) => {
-                            //console.debug("Already recorded: " + rf+ " "+rf.recording.itemcode);
-                            //this.addRecordingFileByDescriptor(rf);
+                            if (rf.startedDate) {
+                                rf._startedAsDateObj = new Date(rf.startedDate);
+                            }
+                            if (rf.date) {
+                                rf._dateAsDateObj = new Date(rf.date);
+                            }
                             this.recorderCombiPane.push(rf);
                         });
                     }
@@ -11511,9 +11577,10 @@ class AudioRecorder {
                 }
             });
         }
-        if (this.recorderCombiPane.recordingListComp.recordingList.length > 0) {
-            this.selectRecordingFile(this.recorderCombiPane.recordingListComp.recordingList[0]);
-        }
+        // if(this.recorderCombiPane.recordingListComp.recordingList.length>0){
+        //   this.selectRecordingFile(this.recorderCombiPane.recordingListComp.recordingList[0]);
+        // }
+        this.recorderCombiPane.selectTop();
         this.enableNavigation();
     }
     isRecording() {
@@ -11617,7 +11684,10 @@ class AudioRecorder {
             //   it.recs = new Array<RecordingFile>();
             // }
             let rf = new RecordingFile(UUID.generate(), sessId, ad);
-            rf.startedDate = this.startedDate;
+            rf._startedAsDateObj = this.startedDate;
+            if (rf._startedAsDateObj) {
+                rf.startedDate = rf._startedAsDateObj.toString();
+            }
             // it.recs.push(rf);
             //
             // if (this.enableUploadRecordings) {
@@ -11649,7 +11719,7 @@ class AudioRecorder {
                 this.displayRecFile = rf;
                 //this.recordingListComp.recordingList.push(rf);
                 this.recorderCombiPane.push(rf);
-                this.postRecordingMultipart(wavFile, rf.uuid, rf.session, rf.startedDate, recUrl);
+                this.postRecordingMultipart(wavFile, rf.uuid, rf.session, rf._startedAsDateObj, recUrl);
                 this.processingRecording = false;
                 this.changeDetectorRef.detectChanges();
             });
@@ -11948,7 +12018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
                 }]
         }] });
 
-const VERSION = '2.22.0';
+const VERSION = '2.22.4';
 
 /*
  * Public API Surface of speechrecorderng