speechrecorderng 3.11.24 → 3.11.26

package/README.md

@@ -9,7 +9,7 @@ For backwards compatibility to server REST API v1 set the property `apiVersion:
 
 ### Install NPM package
 Speechrecorder module is available as NPM package.
-Add `"speechrecorderng": "3.11.23"` to the `dependencies` array property in the `package.json` file of your application. Run `npm install` to install the package.
+Add `"speechrecorderng": "3.11.26"` to the `dependencies` array property in the `package.json` file of your application. Run `npm install` to install the package.
 ### Module integration
 Add SpeechRecorderNg module to 'imports' property of your `AppModule` annotation. The module main component `SpeechRecorder` should be activated by an Angular route.
 

package/fesm2022/speechrecorderng.mjs

@@ -901,6 +901,9 @@ class AudioSourceNode extends AudioWorkletNode {
     static { this.DEFAULT_BUFFER_FILL_SECONDS = 10; }
     static { this.DEFAULT_STREAM_READ_FRAME_LEN = 1024; }
     static { this.QUANTUM_FRAME_LEN = 128; }
+    resetPlayPositionTime() {
+        this._playStartTime = null;
+    }
     get playPositionTime() {
         let ppt = null;
         if (this._playStartTime !== null) {
@@ -2648,6 +2651,12 @@ class AudioPlayer {
         }
         return this.context;
     }
+    _resetPlayPosition() {
+        this.playStartTime = null;
+        if (this.sourceAudioWorkletNode) {
+            this.sourceAudioWorkletNode.resetPlayPositionTime();
+        }
+    }
     get startAction() {
         return this._startAction;
     }
@@ -5683,14 +5692,14 @@ class AudioSignal extends AudioCanvasLayerComponent {
     }
     drawPlayPosition() {
         if (this.markerCanvas) {
-            let w = this.markerCanvas.width;
-            let h = this.markerCanvas.height;
-            let g = this.markerCanvas.getContext("2d");
+            const w = this.markerCanvas.width;
+            const h = this.markerCanvas.height;
+            const g = this.markerCanvas.getContext("2d");
             if (g) {
                 g.clearRect(0, 0, w, h);
-                if (this._playFramePosition) {
-                    let pixelPos = this.frameToViewPortXPixelPosition(this._playFramePosition);
-                    if (pixelPos) {
+                if (this._playFramePosition != null) {
+                    const pixelPos = this.frameToViewPortXPixelPosition(this._playFramePosition);
+                    if (pixelPos != null) {
                         g.fillStyle = 'red';
                         g.strokeStyle = 'red';
                         g.beginPath();
@@ -5767,7 +5776,7 @@ class AudioSignal extends AudioCanvasLayerComponent {
                 this.signalCanvas.style.left = Math.round(this.bounds.position.left).toString() + 'px';
                 this.signalCanvas.width = Math.round(this.bounds.dimension.width);
                 this.signalCanvas.height = Math.round(this.bounds.dimension.height);
-                let g = this.signalCanvas.getContext("2d");
+                const g = this.signalCanvas.getContext("2d");
                 if (g) {
                     //g.clearRect(0, 0,w, h);
                     g.fillStyle = "black";
@@ -5777,6 +5786,7 @@ class AudioSignal extends AudioCanvasLayerComponent {
         }
         this.startRender();
         this.drawCursorLayer();
+        this.drawPlayPosition();
     }
     startRender() {
         if (this.worker) {
@@ -5789,24 +5799,24 @@ class AudioSignal extends AudioCanvasLayerComponent {
         if (this._audioDataHolder) {
             this._audioDataHolder.addOnReadyListener(() => {
                 if (this._audioDataHolder && this.bounds && this.bounds.dimension) {
-                    let w = Math.round(this.bounds.dimension.width);
-                    let h = Math.round(this.bounds.dimension.height);
-                    let vw = Math.round(this.virtualDimension.width);
+                    const w = Math.round(this.bounds.dimension.width);
+                    const h = Math.round(this.bounds.dimension.height);
+                    const vw = Math.round(this.virtualDimension.width);
                     if (w > 0 && h > 0 && vw > 0) {
                         //this.wo = new Worker('./audiosignal.worker.js',{type: 'module'});
                         this.worker = new Worker(this.workerURL);
                         //this.wo = new Worker('worker/audiosignal.worker.ts');
                         //let Worker = require('worker!../../../workers/uploader/main');
-                        let chs = this._audioDataHolder.numberOfChannels;
-                        let leftPos = Math.round(this.bounds.position.left);
+                        const chs = this._audioDataHolder.numberOfChannels;
+                        const leftPos = Math.round(this.bounds.position.left);
                         let renderPos = leftPos;
-                        let frameLength = this._audioDataHolder.frameLen;
-                        let framesPerPixel = Math.ceil(frameLength / vw);
+                        const frameLength = this._audioDataHolder.frameLen;
+                        const framesPerPixel = Math.ceil(frameLength / vw);
                         //console.debug("Chs: " + chs + ", vw: " + vw + ", frameLength: " + frameLength + ", framesPerPixel: " + framesPerPixel);
                         let ad = new Float32Array(chs * framesPerPixel);
-                        let raAs = this._audioDataHolder.randomAccessAudioStream();
+                        const raAs = this._audioDataHolder.randomAccessAudioStream();
                         let audioBuffer = null;
-                        let audioSource = this._audioDataHolder.audioSource;
+                        const audioSource = this._audioDataHolder.audioSource;
                         if (audioSource instanceof AudioBufferSource) {
                             audioBuffer = audioSource.audioBuffer;
                         }
@@ -5837,12 +5847,12 @@ class AudioSignal extends AudioCanvasLayerComponent {
                                     const pointsLen = chs * w;
                                     for (let ch = 0; ch < chs; ch++) {
                                         if (psMinMax) {
-                                            let rBasePos = ch * rw;
-                                            let basePos = ch * w;
-                                            let rPosMin = rBasePos;
-                                            let rPosMax = rPointsLen + rPosMin;
-                                            let posMin = basePos + (renderPos - leftPos);
-                                            let posMax = pointsLen + posMin;
+                                            const rBasePos = ch * rw;
+                                            const basePos = ch * w;
+                                            const rPosMin = rBasePos;
+                                            const rPosMax = rPointsLen + rPosMin;
+                                            const posMin = basePos + (renderPos - leftPos);
+                                            const posMax = pointsLen + posMin;
                                             psMinMax[posMin] = me.data.psMinMax[rPosMin];
                                             //console.debug('Min: ('+posMin+'): '+me.data.psMinMax[rPosMin]);
                                             psMinMax[posMax] = me.data.psMinMax[rPosMax];
@@ -5979,9 +5989,9 @@ class AudioSignal extends AudioCanvasLayerComponent {
         }
         else {
             if (this.bounds && this.bounds.dimension) {
-                let w = Math.round(this.bounds.dimension.width);
-                let h = Math.round(this.bounds.dimension.height);
-                let g = this.signalCanvas.getContext("2d");
+                const w = Math.round(this.bounds.dimension.width);
+                const h = Math.round(this.bounds.dimension.height);
+                const g = this.signalCanvas.getContext("2d");
                 if (g) {
                     g.clearRect(0, 0, w, h);
                 }
@@ -6009,7 +6019,7 @@ class AudioSignal extends AudioCanvasLayerComponent {
         let g = this.signalCanvas.getContext("2d");
         if (g) {
             g.clearRect(0, 0, w, h);
-            let pointsLen = w * chs;
+            const pointsLen = w * chs;
             // one for min one for max
             //const arrLen = pointsLen * 2;
             if (this._audioDataHolder) {
@@ -6149,7 +6159,7 @@ class AudioSignal extends AudioCanvasLayerComponent {
     // }
     setData(audioData) {
         this._audioDataHolder = audioData;
-        this.playFramePosition = 0;
+        this.playFramePosition = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: AudioSignal, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: AudioSignal, isStandalone: false, 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: `
@@ -6523,8 +6533,8 @@ class Sonagram extends AudioCanvasLayerComponent {
             if (g) {
                 g.clearRect(0, 0, w, h);
                 if (this._playFramePosition != null) {
-                    let pixelPos = this.frameToViewPortXPixelPosition(this._playFramePosition);
-                    if (pixelPos) {
+                    const pixelPos = this.frameToViewPortXPixelPosition(this._playFramePosition);
+                    if (pixelPos != null) {
                         g.fillStyle = 'red';
                         g.strokeStyle = 'red';
                         g.beginPath();
@@ -6882,6 +6892,7 @@ class Sonagram extends AudioCanvasLayerComponent {
         }
         this.startRender();
         this.drawCursorLayer();
+        this.drawPlayPosition();
     }
     startRender() {
         //console.debug("Sonagram start render...");
@@ -7295,7 +7306,7 @@ class Sonagram extends AudioCanvasLayerComponent {
     //
     setData(audioData) {
         this._audioDataHolder = audioData;
-        this.playFramePosition = 0;
+        this.playFramePosition = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: Sonagram, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: Sonagram, isStandalone: false, 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: `
@@ -13663,6 +13674,7 @@ class SessionManager extends BasicRecorder {
         this._displayRecFile = displayRecFile;
     }
     updateDisplayRecFile(displayRecFile, fetchAndApplyRecordingFile = true) {
+        this.liveLevelDisplay.playFramePosition = null;
         this.displayRecFile = displayRecFile;
         if (this._displayRecFile) {
             if (this.items) {
@@ -14467,13 +14479,13 @@ class SessionManager extends BasicRecorder {
       [playSelectionAction]="controlAudioPlayer?.startSelectionAction"
       [autoPlayOnSelectToggleAction]="controlAudioPlayer?.autoPlayOnSelectToggleAction"
       [playStopAction]="controlAudioPlayer?.stopAction">
-    
+
     </app-sprprompting>
     @if (screenXs) {
       <mat-progress-bar [value]="progressPercentValue()" ></mat-progress-bar>
     }
-    
-    
+
+
     <div [class]="{audioStatusDisplay:!screenXs,audioStatusDisplayXs:screenXs}">
       <audio-levelbar style="flex:1 0 1%" [streamingMode]="isRecording() || keepLiveLevel" [displayLevelInfos]="displayAudioClip?.levelInfos"  [state]="liveLevelDisplayState"></audio-levelbar>
       <div style="display:flex;flex-direction: row">
@@ -14486,7 +14498,7 @@ class SessionManager extends BasicRecorder {
           [agc]="this.ac?.agcStatus"
           (onShowRecordingDetails)="audioSignalCollapsed=!audioSignalCollapsed">
         </spr-recordingitemcontrols>
-    
+
         @if (screenXs && enableUploadRecordings) {
           <app-uploadstatus class="ricontrols dark"  style="flex:0 0 0" [value]="uploadProgress"
           [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
@@ -14536,13 +14548,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
       [playSelectionAction]="controlAudioPlayer?.startSelectionAction"
       [autoPlayOnSelectToggleAction]="controlAudioPlayer?.autoPlayOnSelectToggleAction"
       [playStopAction]="controlAudioPlayer?.stopAction">
-    
+
     </app-sprprompting>
     @if (screenXs) {
       <mat-progress-bar [value]="progressPercentValue()" ></mat-progress-bar>
     }
-    
-    
+
+
     <div [class]="{audioStatusDisplay:!screenXs,audioStatusDisplayXs:screenXs}">
       <audio-levelbar style="flex:1 0 1%" [streamingMode]="isRecording() || keepLiveLevel" [displayLevelInfos]="displayAudioClip?.levelInfos"  [state]="liveLevelDisplayState"></audio-levelbar>
       <div style="display:flex;flex-direction: row">
@@ -14555,7 +14567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
           [agc]="this.ac?.agcStatus"
           (onShowRecordingDetails)="audioSignalCollapsed=!audioSignalCollapsed">
         </spr-recordingitemcontrols>
-    
+
         @if (screenXs && enableUploadRecordings) {
           <app-uploadstatus class="ricontrols dark"  style="flex:0 0 0" [value]="uploadProgress"
           [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
@@ -15385,6 +15397,9 @@ class AudioDisplayPlayer {
         if (this.ap && this.ap.playPositionFrames) {
             this.audioDisplayScrollPane.playFramePosition = this.ap.playPositionFrames;
         }
+        else {
+            this.audioDisplayScrollPane.playFramePosition = null;
+        }
     }
     audioPlayerUpdate(e) {
         if (EventType.STARTED === e.type) {
@@ -16734,7 +16749,7 @@ class RecordingList {
           <ng-container matColumnDef="startedDate">
             <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>
+                *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-header>Length</th>
@@ -16782,7 +16797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
           <ng-container matColumnDef="startedDate">
             <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>
+                *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-header>Length</th>
@@ -17236,6 +17251,7 @@ class AudioRecorder extends BasicRecorder {
     }
     set displayRecFile(displayRecFile) {
         //this.audioLoaded=false;
+        this.liveLevelDisplay.playFramePosition = null;
         this._displayRecFile = displayRecFile;
         if (this._displayRecFile) {
             let adh = this._displayRecFile.audioDataHolder;
@@ -17745,8 +17761,11 @@ class AudioRecorder extends BasicRecorder {
             const ppFrames = this._controlAudioPlayer.playPositionFrames;
             if (ppFrames !== null) {
                 this.recorderCombiPane.audioDisplay.playFramePosition = ppFrames;
-                this.liveLevelDisplay.playFramePosition = ppFrames;
             }
+            this.liveLevelDisplay.playFramePosition = ppFrames;
+        }
+        else {
+            this.liveLevelDisplay.playFramePosition = null;
         }
     }
     audioPlayerUpdate(e) {
@@ -17759,6 +17778,7 @@ class AudioRecorder extends BasicRecorder {
         else if (EventType.ENDED === e.type) {
             //.status='Ready.';
             window.clearInterval(this.updateTimerId);
+            this.updateControlPlaybackPosition();
         }
         if (!this.destroyed) {
             this.changeDetectorRef.detectChanges();
@@ -18109,7 +18129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     exports: [MessageDialog, SpeechrecorderngComponent, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, AudioRecorder], imports: [RouterModule.forChild(SPR_ROUTES), CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule, MatMenuModule, IntersectionObserverDirective], providers: [SessionService, ProjectService, ScriptService, RecordingService, RecordingFileService, SpeechRecorderUploader, provideHttpClient(withInterceptorsFromDi())] }]
         }] });
 
-const VERSION = '3.11.24';
+const VERSION = '3.11.26';
 
 const SPEECHRECORDER_ENVIRONMENT_DEFAULTS = {
     production: false,