refactor(octra): show changes on audio viewer while dragging

apps/octra/src/app/core/store/login-mode/annotation/annotation.reducer.ts

@@ -286,9 +286,6 @@ export class AnnotationStateReducers {
 
             if (currentLevel) {
               for (const item of items) {
-                console.log(
-                  `change ${item.id} to ${(item as any).time.seconds}`
-                );
                 state.transcript = state.transcript
                   .clone()
                   .changeCurrentItemById(item.id, item);

apps/octra/src/app/editors/2D-editor/2D-editor.component.html

@@ -55,7 +55,6 @@
     [refreshOnInternChanges]="false"
     [annotation]="annotationStoreService.transcript!"
     (currentLevelChange)="onCurrentLevelChange($event)"
-    (boundaryDragging)="onBoundaryDragged($event)"
     id="special"
     style="height: 400px; display: flex; flex: auto; flex-direction: column"
   >

apps/octra/src/app/editors/2D-editor/2D-editor.component.ts

@@ -1092,8 +1092,4 @@ export class TwoDEditorComponent
       );
     }
   }
-
-  onBoundaryDragged($event: any) {
-    console.log($event);
-  }
 }

libs/annotation/src/lib/annotation.ts

@@ -716,6 +716,14 @@ export class OctraAnnotationLevel<T extends OLevel<S>, S extends OItem> {
 
     return this;
   }
+
+  getLeftSibling(item: S) {
+    return this.level.getLeftSibling(item);
+  }
+
+  getRightSibling(item: S) {
+    return this.level.getRightSibling(item);
+  }
 }
 
 export class OctraAnnotationSegmentLevel<
@@ -864,6 +872,16 @@ export class OctraAnnotationEventLevel {
 
     return this;
   }
+
+  getLeftSibling(item: OctraAnnotationEvent) {
+    const index = this.items.findIndex((a) => a.id === item.id);
+    return index > 0 ? this.items[index - 1] : undefined;
+  }
+
+  getRightSibling(item: OctraAnnotationEvent) {
+    const index = this.items.findIndex((a) => a.id === item.id);
+    return index > -1 && index < this.items.length - 1 ? this.items[index + 1] : undefined;
+  }
 }
 
 export type OctraAnnotationAnyLevel<

libs/annotation/src/lib/annotjson.ts

@@ -161,6 +161,16 @@ export class OLevel<T extends OItem> implements ILevel {
       this.items.map((a) => a.clone())
     );
   }
+
+  getLeftSibling(item: OItem): T | undefined {
+    const index = this.items.findIndex((a) => a.id === item.id);
+    return index > 0 ? this.items[index - 1] : undefined;
+  }
+
+  getRightSibling(item: OItem): T | undefined {
+    const index = this.items.findIndex((a) => a.id === item.id);
+    return index > -1 && index < this.items.length - 1 ? this.items[index + 1] : undefined;
+  }
 }
 
 export class OSegmentLevel<T extends OSegment>

libs/ngx-components/src/lib/components/audio/audio-viewer/audio-viewer.component.ts

@@ -118,6 +118,19 @@ export class AudioViewerComponent implements OnInit, OnChanges, OnDestroy {
             'cursor',
             'auto'
           );
+        }
+
+        if (event.status === 'dragging') {
+          this.subscrManager.add(
+            timer(0).subscribe({
+              next: () => {
+                this.refresh();
+              },
+            })
+          );
+        }
+
+        if (['stopped', 'started'].includes(event.status)) {
           if (this.refreshOnInternChanges) {
             this.refresh();
           }
@@ -1741,7 +1754,7 @@ export class AudioViewerComponent implements OnInit, OnChanges, OnDestroy {
 
             boundaryObj.on('mousedown', () => {
               if (!this.settings.boundaries.readonly) {
-                this.av.dragableBoundaryNumber = boundary.num;
+                this.av.dragableBoundaryID = boundary.id;
               }
             });
             boundaryObj.on('mouseenter', () => {
@@ -1914,6 +1927,7 @@ export class AudioViewerComponent implements OnInit, OnChanges, OnDestroy {
       context.fillStrokeShape(shape);
     }
   };
+
   private overlaySceneFunction = (
     lineInterval: {
       from: number;
@@ -2495,7 +2509,7 @@ export class AudioViewerComponent implements OnInit, OnChanges, OnDestroy {
       }
 
       this.av.setMouseMovePosition(absXPos);
-      if (this.av.dragableBoundaryNumber < 0) {
+      if (this.av.dragableBoundaryID < 0) {
         this.drawWholeSelection();
       }
 
@@ -2512,7 +2526,9 @@ export class AudioViewerComponent implements OnInit, OnChanges, OnDestroy {
     const shortcutInfo = this.shortcutsManager.checkKeyEvent(event, Date.now());
 
     this.av.shiftPressed =
-      event.keyCode === 16 || event.code?.includes('Shift') || event.key?.includes('Shift');
+      event.keyCode === 16 ||
+      event.code?.includes('Shift') ||
+      event.key?.includes('Shift');
 
     if (shortcutInfo !== undefined) {
       const comboKey = shortcutInfo.shortcut;