fix(representation): resolve timeline issue when resizing window (DEV-819)

src/app/workspace/comparison/comparison.component.html

@@ -3,16 +3,16 @@
         <as-split-area>
             <!-- note: This part is repeating twice (not added as component) because angular-split
                 library does not support addition div inside as-split -->
-            <as-split direction="horizontal">
+            <as-split direction="horizontal" (dragEnd)="splitSizeChanged = $event">
                 <as-split-area *ngFor="let res of topRow">
-                    <app-resource [resourceIri]="res"></app-resource>
+                    <app-resource [resourceIri]="res" [splitSizeChanged]="splitSizeChanged"></app-resource>
                 </as-split-area>
             </as-split>
         </as-split-area>
         <as-split-area *ngIf="noOfResources > 3">
-            <as-split direction="horizontal">
+            <as-split direction="horizontal" (dragEnd)="splitSizeChanged = $event">
                 <as-split-area *ngFor="let res of bottomRow">
-                    <app-resource [resourceIri]="res"></app-resource>
+                    <app-resource [resourceIri]="res" [splitSizeChanged]="splitSizeChanged"></app-resource>
                 </as-split-area>
             </as-split>
         </as-split-area>

src/app/workspace/comparison/comparison.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, OnChanges } from '@angular/core';
 import { ShortResInfo } from '../results/list-view/list-view.component';
+import { SplitSize } from '../results/results.component';
 
 @Component({
     selector: 'app-comparison',
@@ -23,6 +24,10 @@ export class ComparisonComponent implements OnChanges {
      */
     @Input() resources?: ShortResInfo[];
 
+
+    // parent (or own) split size changed
+    @Input() splitSizeChanged: SplitSize;
+
     // if number of selected resources > 3, divide them into 2 rows
     topRow: string[] = [];
     bottomRow: string[] = [];

src/app/workspace/resource/representation/av-timeline/av-timeline.component.ts

@@ -10,6 +10,7 @@ import {
     SimpleChange,
     ViewChild
 } from '@angular/core';
+import { SplitSize } from 'src/app/workspace/results/results.component';
 
 export interface PointerValue {
     position: number;
@@ -40,6 +41,9 @@ export class AvTimelineComponent implements OnChanges {
     // disable in case of missing file
     @Input() disabled: boolean;
 
+    // split size changed
+    @Input() splitSizeChanged: SplitSize;
+
     // send click position to parent
     @Output() changed = new EventEmitter<number>();
 
@@ -88,6 +92,11 @@ export class AvTimelineComponent implements OnChanges {
             return;
         }
 
+        if (changes.splitSizeChanged) {
+            // reset the timeline dimension
+            this.timelineDimension = this._getResizedTimelineDimensions();
+        }
+
         if (!this.timelineDimension) {
             // calculate timeline dimension if it doesn't exist
             this.timelineDimension = this._getTimelineDimensions();
@@ -206,6 +215,7 @@ export class AvTimelineComponent implements OnChanges {
      */
     private _onWindowResize(ev: Event) {
         this.timelineDimension = this._getResizedTimelineDimensions();
+        this.updatePositionFromTime(this.value);
         this.dimension.emit(this.timelineDimension);
     }
 

src/app/workspace/resource/representation/video/video.component.html

@@ -30,7 +30,7 @@
 
     <mat-toolbar class="controls">
         <mat-toolbar-row style="overflow: hidden;">
-            <app-av-timeline #timeline [value]="currentTime" [min]="0" [max]="duration" [resized]="cinemaMode"
+            <app-av-timeline #timeline [value]="currentTime" [min]="0" [max]="duration" [resized]="cinemaMode" [splitSizeChanged]="splitSizeChanged"
                 (move)="updatePreview($event)" (mouseenter)="displayPreview(true)" (dimension)="timelineDimension = $event"
                 (mouseleave)="displayPreview(false)" (changed)="updateTimeFromSlider($event)"
                 [disabled]="failedToLoad"></app-av-timeline>

src/app/workspace/resource/representation/video/video.component.ts

@@ -16,6 +16,7 @@ import { mergeMap } from 'rxjs/operators';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
 import { DialogComponent } from 'src/app/main/dialog/dialog.component';
 import { ErrorHandlerService } from 'src/app/main/services/error-handler.service';
+import { SplitSize } from 'src/app/workspace/results/results.component';
 import { EmitEvent, Events, UpdatedFileEventValue, ValueOperationEventService } from '../../services/value-operation-event.service';
 import { PointerValue } from '../av-timeline/av-timeline.component';
 import { FileRepresentation } from '../file-representation';
@@ -34,6 +35,8 @@ export class VideoComponent implements OnInit, AfterViewInit {
 
     @Input() parentResource: ReadResource;
 
+    @Input() splitSizeChanged: SplitSize;
+
     @Output() loaded = new EventEmitter<boolean>();
 
     @ViewChild('videoEle') videoEle: ElementRef;

src/app/workspace/resource/resource.component.html

@@ -35,6 +35,7 @@
             <app-video #video class="dsp-representation video" *ngSwitchCase="representationConstants.movingImage"
                 [src]="representationsToDisplay[0]"
                 [parentResource]="resource.res"
+                [splitSizeChanged]="splitSizeChanged"
                 (loaded)="representationLoaded($event)">
             </app-video>
 

src/app/workspace/resource/resource.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/member-ordering */
-import { Component, Inject, Input, OnChanges, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, Inject, Input, OnChanges, OnDestroy, OnInit, SimpleChange, ViewChild } from '@angular/core';
 import { MatTabChangeEvent } from '@angular/material/tabs';
 import { Title } from '@angular/platform-browser';
 import {
@@ -29,6 +29,7 @@ import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens'
 import { ErrorHandlerService } from 'src/app/main/services/error-handler.service';
 import { NotificationService } from 'src/app/main/services/notification.service';
 import { Session, SessionService } from 'src/app/main/services/session.service';
+import { SplitSize } from '../results/results.component';
 import { DspCompoundPosition, DspResource } from './dsp-resource';
 import { PropertyInfoValues } from './properties/properties.component';
 import { FileRepresentation, RepresentationConstants } from './representation/file-representation';
@@ -49,6 +50,8 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
 
     @Input() resourceIri: string;
 
+    @Input() splitSizeChanged: SplitSize;
+
     projectCode: string;
 
     resourceUuid: string;
@@ -157,7 +160,12 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
 
     }
 
-    ngOnChanges() {
+    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
+        // do not reload the whole resource when the split size has changed
+        if (this.splitSizeChanged) {
+            return;
+        }
+
         this.loading = true;
         // reset all resources
         this.resource = undefined;

src/app/workspace/results/results.component.html

@@ -1,7 +1,7 @@
 <!-- In case if results present -->
 <div class="content" *ngIf="searchParams">
 
-    <as-split direction="horizontal">
+    <as-split direction="horizontal" (dragEnd)="splitSizeChanged = $event">
         <as-split-area [size]="40">
             <app-list-view [search]="searchParams" [displayViewSwitch]="false" [withMultipleSelection]="true"
             (selectedResources)="openSelectedResources($event)">
@@ -10,14 +10,14 @@
         <as-split-area [size]="60" *ngIf="selectedResources?.count > 0" cdkScrollable>
             <div [ngSwitch]="viewMode">
                 <!-- single resource view -->
-                <app-resource *ngSwitchCase="'single'" [resourceIri]="selectedResources.resInfo[0].id"></app-resource>
+                <app-resource *ngSwitchCase="'single'" [resourceIri]="selectedResources.resInfo[0].id" [splitSizeChanged]="splitSizeChanged"></app-resource>
 
                 <!-- intermediate view -->
                 <app-intermediate *ngSwitchCase="'intermediate'" [resources]="selectedResources" (action)="viewMode=$event"></app-intermediate>
 
                 <!-- multiple resources view / comparison viewer -->
                 <app-comparison *ngSwitchCase="'compare'" [noOfResources]="selectedResources.count"
-                    [resources]="selectedResources.resInfo">
+                    [resources]="selectedResources.resInfo" [splitSizeChanged]="splitSizeChanged">
                 </app-comparison>
             </div>
         </as-split-area>

src/app/workspace/results/results.component.ts

@@ -3,6 +3,11 @@ import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Params } from '@angular/router';
 import { FilteredResources, SearchParams } from './list-view/list-view.component';
 
+export interface SplitSize {
+    gutterNum: number;
+    sizes: Array<number>;
+};
+
 @Component({
     selector: 'app-results',
     templateUrl: './results.component.html',
@@ -28,6 +33,8 @@ export class ResultsComponent {
 
     loading = true;
 
+    splitSizeChanged: SplitSize;
+
     constructor(
         private _route: ActivatedRoute,
         private _titleService: Title