fix

dasch-swiss · Jul 11, 2024 · 3fb2a65 · 3fb2a65
1 parent 1865cc2
commit 3fb2a65
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/libs/vre/shared/app-segment-support/src/lib/segment.component.ts b/libs/vre/shared/app-segment-support/src/lib/segment.component.ts
@@ -8,7 +8,7 @@ import { Segment } from './segment';
     <div
       class="segment"
       [appCustomTooltip]="segment"
-      [ngStyle]="{ width: width + '%', left: start + '%', top: segment.row * rowHeight + 'px' }"
+      [ngStyle]="{ width: width + '%', left: start + '%' }"
       (click)="playMedia()"></div>
   `,
   styleUrls: ['./segment.component.scss'],
@@ -20,8 +20,6 @@ export class SegmentComponent implements OnInit {
   width!: number;
   start!: number;
 
-  readonly rowHeight = 8;
-
   readonly segmentRightMargin = 0.2;
 
   play = false;

diff --git a/libs/vre/shared/app-segment-support/src/lib/segments-display.component.ts b/libs/vre/shared/app-segment-support/src/lib/segments-display.component.ts
@@ -5,18 +5,31 @@ import { Segment } from './segment';
   selector: 'app-segments-display',
   template: ` <div style="background: black; padding: 0 24px" [ngStyle]="{ height: height + 'px' }">
     <div style="position: relative">
-      <app-segment *ngFor="let segment of segments" [segment]="segment" [videoLengthSecs]="videoLengthSecs" />
+      <div *ngFor="let row of segmentInRow" style="height: 10px">
+        <app-segment *ngFor="let segment of row" [segment]="segment" [videoLengthSecs]="videoLengthSecs" />
+      </div>
     </div>
   </div>`,
 })
 export class SegmentsDisplayComponent implements OnChanges {
   @Input({ required: true }) segments!: Segment[];
   @Input({ required: true }) videoLengthSecs!: number;
 
+  segmentInRow!: Segment[][];
   height!: number;
   readonly rowHeight = 8;
 
   ngOnChanges() {
-    this.height = (this.segments[this.segments.length - 1].row + 1) * this.rowHeight;
+    this.segmentInRow = this.segments.reduce(
+      (array, current) => {
+        if (current.row === array.length - 1) {
+          array[array.length - 1].push(current);
+        } else {
+          array.push([current]);
+        }
+        return array;
+      },
+      [[]] as Segment[][]
+    );
   }
 }
diff --git a/libs/vre/shared/app-segment-support/src/lib/segments.service.ts b/libs/vre/shared/app-segment-support/src/lib/segments.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { ChangeDetectorRef, Injectable } from '@angular/core';
 import { BehaviorSubject, EMPTY } from 'rxjs';
 import { expand, reduce } from 'rxjs/operators';
 import { Segment } from './segment';
@@ -11,7 +11,10 @@ export class SegmentsService {
   private _highlightSegment = new BehaviorSubject<Segment | null>(null);
   highlightSegment$ = this._highlightSegment.asObservable();
 
-  constructor(private _segmentApi: SegmentApiService) {}
+  constructor(
+    private _segmentApi: SegmentApiService,
+    private _cdr: ChangeDetectorRef
+  ) {}
 
   onInit(resourceIri: string, type: 'VideoSegment' | 'AudioSegment') {
     this.getSegment(resourceIri, type);
@@ -34,6 +37,7 @@ export class SegmentsService {
       )
       .subscribe(v => {
         this.segments = v;
+        this._cdr.detectChanges();
       });
   }