hazza/yel-dspace-angular
1
0
Fork 0
forked from hazza/dspace-angular
Code Pull Requests Activity

79597: Fix thumbnails ~ item page direct request

Browse Source
This commit is contained in:
Yura Bondarenko
2021-05-27 15:51:54 +02:00
parent 9b95fc5de9
commit c717fc5ec8
13 changed files with 66 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html
View File

@@ -1,4 +1,4 @@
<div class="simple-view-element" [class.d-none]="content.textContent.trim().length === 0 && hasNoValue(content.querySelector('img'))">
<div class="simple-view-element" [class.d-none]="content.textContent.trim().length === 0 && hasNoValue(content.querySelector('img,.thumbnail-content'))">
<h5 class="simple-view-element-header" *ngIf="label">{{ label }}</h5>
<div #content class="simple-view-element-body">
<ng-content></ng-content>

2
src/app/+item-page/simple/item-types/publication/publication.component.html
View File

@@ -10,7 +10,7 @@
<div class="col-xs-12 col-md-4">
<ng-container *ngIf="!mediaViewer.image">
<ds-metadata-field-wrapper>
<ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
<ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
</ds-metadata-field-wrapper>
</ng-container>
<ng-container *ngIf="mediaViewer.image">

21
src/app/+item-page/simple/item-types/shared/item.component.ts
View File

@@ -4,8 +4,10 @@ import { environment } from '../../../../../environments/environment';
import { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
import { Bitstream } from '../../../../core/shared/bitstream.model';
import { Item } from '../../../../core/shared/item.model';
import { getFirstSucceededRemoteDataPayload } from '../../../../core/shared/operators';
import { getFirstSucceededRemoteDataPayload, takeUntilCompletedRemoteData } from '../../../../core/shared/operators';
import { getItemPageRoute } from '../../../item-page-routing-paths';
import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
import { RemoteData } from '../../../../core/data/remote-data';
@Component({
selector: 'ds-item',
@@ -17,6 +19,11 @@ import { getItemPageRoute } from '../../../item-page-routing-paths';
export class ItemComponent implements OnInit {
@Input() object: Item;
/**
* The Item's thumbnail
*/
thumbnail$: BehaviorSubject<RemoteData<Bitstream>>;
/**
* Route to the item page
*/
@@ -28,12 +35,12 @@ export class ItemComponent implements OnInit {
ngOnInit(): void {
this.itemPageRoute = getItemPageRoute(this.object);
}
// TODO refactor to return RemoteData, and thumbnail template to deal with loading
getThumbnail(): Observable<Bitstream> {
return this.bitstreamDataService.getThumbnailFor(this.object).pipe(
getFirstSucceededRemoteDataPayload()
);
this.thumbnail$ = new BehaviorSubject<RemoteData<Bitstream>>(undefined);
this.bitstreamDataService.getThumbnailFor(this.object).pipe(
takeUntilCompletedRemoteData(),
).subscribe((rd: RemoteData<Bitstream>) => {
this.thumbnail$.next(rd);
});
}
}

2
src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html
View File

@@ -10,7 +10,7 @@
<div class="col-xs-12 col-md-4">
<ng-container *ngIf="!mediaViewer.image">
<ds-metadata-field-wrapper>
<ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
<ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
</ds-metadata-field-wrapper>
</ng-container>
<ng-container *ngIf="mediaViewer.image">

2
src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
View File

@@ -9,7 +9,7 @@
<div class="row">
<div class="col-xs-12 col-md-4">
<ds-metadata-field-wrapper>
<ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
<ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
</ds-metadata-field-wrapper>
<ds-generic-item-page-field [item]="object"
[fields]="['publicationvolume.volumeNumber']"

2
src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
View File

@@ -9,7 +9,7 @@
<div class="row">
<div class="col-xs-12 col-md-4">
<ds-metadata-field-wrapper>
<ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
<ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
</ds-metadata-field-wrapper>
<ds-generic-item-page-field [item]="object"
[fields]="['publicationvolume.volumeNumber']"

2
src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
View File

@@ -9,7 +9,7 @@
<div class="row">
<div class="col-xs-12 col-md-4">
<ds-metadata-field-wrapper>
<ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
<ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
</ds-metadata-field-wrapper>
<ds-generic-item-page-field class="item-page-fields" [item]="object"
[fields]="['creativeworkseries.issn']"

2
src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
View File

@@ -8,7 +8,7 @@
rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
class="card-img-top full-width">
<div>
<ds-thumbnail [thumbnail]="getThumbnail() | async">
<ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
</ds-thumbnail>
</div>
</a>

2
src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
View File

@@ -9,7 +9,7 @@
<div class="row">
<div class="col-xs-12 col-md-4">
<ds-metadata-field-wrapper>
<ds-thumbnail [thumbnail]="getThumbnail() | async"
<ds-thumbnail [thumbnail]="thumbnail$ | async"
[defaultImage]="'assets/images/orgunit-placeholder.svg'"
[alt]="'thumbnail.orgunit.alt'"
[placeholder]="'thumbnail.orgunit.placeholder'"

2
src/app/entity-groups/research-entities/item-pages/person/person.component.html
View File

@@ -9,7 +9,7 @@
<div class="row">
<div class="col-xs-12 col-md-4">
<ds-metadata-field-wrapper>
<ds-thumbnail [thumbnail]="getThumbnail() | async"
<ds-thumbnail [thumbnail]="thumbnail$ | async"
[defaultImage]="'assets/images/person-placeholder.svg'"
[alt]="'thumbnail.person.alt'"
[placeholder]="'thumbnail.person.placeholder'">

2
src/app/entity-groups/research-entities/item-pages/project/project.component.html
View File

@@ -10,7 +10,7 @@
<div class="col-xs-12 col-md-4">
<ds-metadata-field-wrapper>
<ds-thumbnail
[thumbnail]="getThumbnail() | async"
[thumbnail]="thumbnail$ | async"
[defaultImage]="'assets/images/project-placeholder.svg'"
[alt]="'thumbnail.project.alt'"
[placeholder]="'thumbnail.project.placeholder'">

8
src/app/thumbnail/thumbnail.component.html
View File

@@ -1,10 +1,14 @@
<div [ngClass]="{ 'thumbnail': true, 'limit-width': limitWidth }">
<ds-loading *ngIf="isLoading; else showThumbnail" class="thumbnail-content" [showMessage]="false">
text-content
</ds-loading>
<ng-template #showThumbnail>
<img *ngIf="src !== null" class="thumbnail-content img-fluid"
[src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()"/>
[src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()">
<div *ngIf="src === null" class="thumbnail-content outer">
<div class="inner">
<div class="thumbnail-placeholder w-100 h-100 p-3 lead">{{ placeholder | translate }}</div>
</div>
</div>
</ng-template>
</div>

41
src/app/thumbnail/thumbnail.component.ts
View File

@@ -1,6 +1,8 @@
import { Component, Input, OnInit } from '@angular/core';
import { Component, Input, OnChanges } from '@angular/core';
import { Bitstream } from '../core/shared/bitstream.model';
import { hasValue } from '../shared/empty.util';
import { RemoteData } from '../core/data/remote-data';
import { BITSTREAM } from '../core/shared/bitstream.resource-type';
/**
* This component renders a given Bitstream as a thumbnail.
@@ -12,11 +14,11 @@ import { hasValue } from '../shared/empty.util';
styleUrls: ['./thumbnail.component.scss'],
templateUrl: './thumbnail.component.html',
})
export class ThumbnailComponent implements OnInit {
export class ThumbnailComponent implements OnChanges {
/**
* The thumbnail Bitstream
*/
@Input() thumbnail: Bitstream;
@Input() thumbnail: Bitstream | RemoteData<Bitstream>;
/**
* The default image, used if the thumbnail isn't set or can't be downloaded.
@@ -27,7 +29,7 @@ export class ThumbnailComponent implements OnInit {
/**
* The src attribute used in the template to render the image.
*/
src: string;
src: string = null;
/**
* i18n key of thumbnail alt text
@@ -44,18 +46,37 @@ export class ThumbnailComponent implements OnInit {
*/
@Input() limitWidth? = true;
isLoading: boolean;
/**
* Initialize the thumbnail.
* Resolve the thumbnail.
* Use a default image if no actual image is available.
*/
ngOnInit(): void {
if (hasValue(this.thumbnail) && hasValue(this.thumbnail._links)
&& hasValue(this.thumbnail._links.content)
&& this.thumbnail._links.content.href) {
this.src = this.thumbnail._links.content.href;
ngOnChanges(): void {
if (this.thumbnail === undefined || this.thumbnail === null) {
return;
}
if (this.thumbnail instanceof Bitstream) {
this.resolveThumbnail(this.thumbnail as Bitstream)
} else {
const thumbnailRD = this.thumbnail as RemoteData<Bitstream>;
if (thumbnailRD.isLoading) {
this.isLoading = true;
} else {
this.resolveThumbnail(thumbnailRD.payload as Bitstream);
}
}
}
private resolveThumbnail(thumbnail: Bitstream): void {
if (hasValue(thumbnail) && hasValue(thumbnail._links)
&& hasValue(thumbnail._links.content)
&& thumbnail._links.content.href) {
this.src = thumbnail._links.content.href;
} else {
this.src = this.defaultImage;
}
this.isLoading = false;
}
/**