hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-12 20:43:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

#0 fix thumbnail

Browse Source
This commit is contained in:
Dániel Péter Sipos
2020-10-27 10:00:21 +01:00
parent d103092a81
commit d7d527b735
4 changed files with 42 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
View File

@@ -1,3 +1,10 @@
<div class="thumbnail">
<img [src]="src | dsSafeUrl" (error)="errorHandler($event)"/>
<div class="thumbnail" *ngVar="src$ | async as src">
<ds-loading
*ngIf="!src"
message="{{ 'loading.default' | translate }}"
[showMessage]="false"
></ds-loading>
<ng-container *ngIf="src">
<img [src]="src | dsSafeUrl" (error)="errorHandler($event)" />
</ng-container>
</div>

33
src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts
View File

@@ -1,4 +1,6 @@
import { Component, Input, OnInit } from '@angular/core';
import { BehaviorSubject, Observable, isObservable } from 'rxjs';
import { RemoteData } from '../../../core/data/remote-data';
import { Bitstream } from '../../../core/shared/bitstream.model';
import { hasValue } from '../../empty.util';
@@ -11,30 +13,45 @@ import { hasValue } from '../../empty.util';
@Component({
selector: 'ds-grid-thumbnail',
styleUrls: ['./grid-thumbnail.component.scss'],
templateUrl: './grid-thumbnail.component.html'
templateUrl: './grid-thumbnail.component.html',
})
export class GridThumbnailComponent implements OnInit {
@Input() thumbnail: Bitstream;
@Input() thumbnail: string | Observable<RemoteData<Bitstream>>;
data: any = {};
/**
* The default 'holder.js' image
*/
@Input() defaultImage? = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
@Input() defaultImage? =
'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
src: string;
src$: BehaviorSubject<string>;
errorHandler(event) {
event.currentTarget.src = this.defaultImage;
}
ngOnInit(): void {
if (hasValue(this.thumbnail) && hasValue(this.thumbnail._links) && this.thumbnail._links.content.href) {
this.src = this.thumbnail._links.content.href;
this.src$ = new BehaviorSubject<string>(this.defaultImage);
console.log('this.thumbnail', this.thumbnail);
if (isObservable(this.thumbnail)) {
this.thumbnail.subscribe((thumbnailRD) => {
this.checkThumbnail(thumbnailRD.payload);
});
} else {
this.src = this.defaultImage
if (this.thumbnail) {
this.src$.next(this.thumbnail);
}
}
}
checkThumbnail(thumbnail: Bitstream) {
if (
hasValue(thumbnail) &&
hasValue(thumbnail._links) &&
thumbnail._links.content.href
) {
this.src$.next(thumbnail._links.content.href);
}
}
}

4
src/app/shared/object-grid/search-result-grid-element/item-search-result/publication/publication-search-result-grid-element.component.html
View File

@@ -4,13 +4,13 @@
<a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/items/' + dso.id]"
class="card-img-top full-width">
<div>
<ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
<ds-grid-thumbnail [thumbnail]="getThumbnail()">
</ds-grid-thumbnail>
</div>
</a>
<span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
<div>
<ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
<ds-grid-thumbnail [thumbnail]="getThumbnail()">
</ds-grid-thumbnail>
</div>
</span>

11
src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts
View File

@@ -6,10 +6,11 @@ import { BitstreamDataService } from '../../../core/data/bitstream-data.service'
import { Bitstream } from '../../../core/shared/bitstream.model';
import { DSpaceObject } from '../../../core/shared/dspace-object.model';
import { Metadata } from '../../../core/shared/metadata.utils';
import { getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
import { hasValue } from '../../empty.util';
import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
import { TruncatableService } from '../../truncatable/truncatable.service';
import { RemoteData } from '../../../core/data/remote-data';
import { filter, map } from 'rxjs/operators';
@Component({
selector: 'ds-search-result-grid-element',
@@ -42,7 +43,9 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
*/
ngOnInit(): void {
if (hasValue(this.object)) {
console.log(this.object)
this.dso = this.object.indexableObject;
console.log('this.dso',this.dso)
}
}
@@ -71,9 +74,7 @@ export class SearchResultGridElementComponent<T extends SearchResult<K>, K exten
}
// TODO refactor to return RemoteData, and thumbnail template to deal with loading
getThumbnail(): Observable<Bitstream> {
return this.bitstreamDataService.getThumbnailFor(this.dso as any).pipe(
getFirstSucceededRemoteDataPayload()
);
getThumbnail(): Observable<RemoteData<Bitstream>> {
return this.bitstreamDataService.getThumbnailFor(this.dso as any);
}
}