Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(representation): resolve timeline issue when resizing window (DEV…
…-819) (#741)

* fix(representation): resolve timeline issue when resizing window

* fix(resource): emit the split size from top to bottom
  • Loading branch information
kilchenmann committed May 19, 2022
1 parent 8119e12 commit da985fc
Show file tree
Hide file tree
Showing 9 changed files with 44 additions and 10 deletions.
8 changes: 4 additions & 4 deletions src/app/workspace/comparison/comparison.component.html
Expand Up @@ -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>
Expand Down
5 changes: 5 additions & 0 deletions 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',
Expand All @@ -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[] = [];
Expand Down
Expand Up @@ -10,6 +10,7 @@ import {
SimpleChange,
ViewChild
} from '@angular/core';
import { SplitSize } from 'src/app/workspace/results/results.component';

export interface PointerValue {
position: number;
Expand Down Expand Up @@ -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>();

Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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);
}

Expand Down
Expand Up @@ -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>
Expand Down
Expand Up @@ -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';
Expand All @@ -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;
Expand Down
1 change: 1 addition & 0 deletions src/app/workspace/resource/resource.component.html
Expand Up @@ -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>

Expand Down
12 changes: 10 additions & 2 deletions 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 {
Expand Down Expand Up @@ -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';
Expand All @@ -49,6 +50,8 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {

@Input() resourceIri: string;

@Input() splitSizeChanged: SplitSize;

projectCode: string;

resourceUuid: string;
Expand Down Expand Up @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions 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)">
Expand All @@ -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>
Expand Down
7 changes: 7 additions & 0 deletions src/app/workspace/results/results.component.ts
Expand Up @@ -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',
Expand All @@ -28,6 +33,8 @@ export class ResultsComponent {

loading = true;

splitSizeChanged: SplitSize;

constructor(
private _route: ActivatedRoute,
private _titleService: Title
Expand Down

0 comments on commit da985fc

Please sign in to comment.