resource.component.html

<div class="content large middle">
    <div class="resource-view" *ngIf="resource">

        <!-- dsp-resource-representation -->
        <div class="representation-container center" *ngIf="representationsToDisplay.length"
            [ngSwitch]="representationsToDisplay[0].fileValue.type">
            <!-- still image view -->
            <app-still-image class="dsp-representation" *ngSwitchCase="representationConstants.stillImage" [images]="representationsToDisplay"
                [imageCaption]="(incomingResource ? resource.res.label + ': ' + incomingResource.res.label : resource.res.label)"
                [compoundNavigation]="compoundPosition" (goToPage)="compoundNavigation($event)"
                (regionClicked)="openRegion($event)">
            </app-still-image>

            <app-document class="dsp-representation" *ngSwitchCase="representationConstants.document" [src]="representationsToDisplay[0]">
            </app-document>

            <app-audio class="dsp-representation audio" *ngSwitchCase="representationConstants.audio" [src]="representationsToDisplay[0]"></app-audio>

            <span *ngSwitchDefault>
                The file representation type "{{representationsToDisplay[0].fileValue.type}}" is not yet implemented
            </span>

            <!-- TODO: here we'll add more viewers and players dsp-moving-image, dsp-audio etc. -->

        </div>

        <!-- tabs -->
        <mat-tab-group animationDuration="0ms" [(selectedIndex)]="selectedTab">
            <!-- first tab for the main resource e.g. book -->
            <mat-tab [label]="resource.res.entityInfo?.classes[resource.res.type].label">
                <app-properties *ngIf="resource.res" [resource]="resource" [displayProjectInfo]="true">
                </app-properties>
            </mat-tab>

            <!-- incoming resource -->
            <mat-tab *ngIf="incomingResource"
                [label]="incomingResource.res.entityInfo.classes[incomingResource.res.type].label">
                <app-properties *ngIf="incomingResource.res" [resource]="incomingResource" [displayProjectInfo]="false">
                </app-properties>
            </mat-tab>

            <!-- annotations -->
            <mat-tab *ngIf="representationsToDisplay.length && representationsToDisplay[0].fileValue.type === representationConstants.stillImage">
                <ng-template matTabLabel class="annotations">
                    <span [matBadge]="representationsToDisplay[0]?.annotations.length"
                        [matBadgeHidden]="representationsToDisplay[0]?.annotations.length === 0" matBadgeColor="primary"
                        matBadgeOverlap="false">
                        Annotations
                    </span>
                </ng-template>
                <div class="region-property" *ngFor="let annotation of annotationResources" [id]="annotation.res.id"
                    [class.active]="annotation.res.id === selectedRegion">
                    <app-properties [resource]="annotation" [displayProjectInfo]="false">
                    </app-properties>
                </div>

            </mat-tab>
        </mat-tab-group>
    </div>
    <!-- progress indicator -->
    <dsp-progress-indicator *ngIf="!resource"></dsp-progress-indicator>
</div>