resource.component.html

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

        <!-- dsp-resource-representation -->
        <div class="representation-container center" *ngIf="representationsToDisplay.length"
            [ngSwitch]="representationsToDisplay[0].fileValue.type">
            <!-- still image view -->
            <app-still-image #stillImage class="dsp-representation" *ngSwitchCase="representationConstants.stillImage"
                [images]="representationsToDisplay"
                [imageCaption]="(incomingResource ? resource.res.label + ': ' + incomingResource.res.label : resource.res.label)"
                [compoundNavigation]="compoundPosition"
                [resourceIri]="incomingResource ? incomingResource.res.id : resource.res.id"
                [project]="resource.res.attachedToProject"
                [currentTab]="selectedTabLabel"
                (goToPage)="compoundNavigation($event)"
                (regionClicked)="openRegion($event)"
                (regionAdded)="updateRegions($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" (selectedTabChange)="tabChanged($event)">
            <!-- 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"
                [adminPermissions]="adminPermissions" [editPermissions]="editPermissions" [valueUuidToHighlight]="valueUuid">
                </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"
                [adminPermissions]="adminPermissions" [editPermissions]="editPermissions" [valueUuidToHighlight]="valueUuid">
                </app-properties>
            </mat-tab>

            <!-- annotations -->
            <mat-tab label="annotations"
                *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" [isAnnotation]="true"
                    [adminPermissions]="adminPermissions" [editPermissions]="editPermissions" [valueUuidToHighlight]="valueUuid">
                    </app-properties>
                </div>

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

    <!-- resource not found  -->
    <div *ngIf="!resource && !loading" class="no-results">
        <p>The resource <span *ngIf="resourceIri">- <strong> {{resourceIri}}</strong> -</span> could not
            be found.</p>
        <p>Reasons:</p>
        <ul>
            <li>It could be a deleted resource and does not exist anymore.</li>
            <li>You don't have the permissions to open this resource.</li>
            <li>The identifier or the ARK URL is wrong.</li>
        </ul>
    </div>
</div>