diff --git a/src/app/item-page/item-page.module.ts b/src/app/item-page/item-page.module.ts index de00122774..485553c141 100644 --- a/src/app/item-page/item-page.module.ts +++ b/src/app/item-page/item-page.module.ts @@ -30,6 +30,7 @@ import { MediaViewerComponent } from './media-viewer/media-viewer.component'; import { ThemedMediaViewerComponent } from './media-viewer/themed-media-viewer.component'; import { MediaViewerVideoComponent } from './media-viewer/media-viewer-video/media-viewer-video.component'; import { MediaViewerImageComponent } from './media-viewer/media-viewer-image/media-viewer-image.component'; +import { ThemedMediaViewerImageComponent } from './media-viewer/media-viewer-image/themed-media-viewer-image.component'; import { NgxGalleryModule } from '@kolkov/ngx-gallery'; import { MiradorViewerComponent } from './mirador-viewer/mirador-viewer.component'; import { VersionPageComponent } from './version-page/version-page/version-page.component'; @@ -66,6 +67,7 @@ const DECLARATIONS = [ ThemedMediaViewerComponent, MediaViewerVideoComponent, MediaViewerImageComponent, + ThemedMediaViewerImageComponent, MiradorViewerComponent, VersionPageComponent, ]; diff --git a/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts b/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts index 0c32b5603d..4c32ba5376 100644 --- a/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts +++ b/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts @@ -18,7 +18,7 @@ export class MediaViewerImageComponent implements OnInit { @Input() preview?: boolean; @Input() image?: string; - loggedin: boolean; + thumbnailPlaceholder = './assets/images/replacement_image.svg'; galleryOptions: NgxGalleryOptions[]; galleryImages: NgxGalleryImage[]; @@ -28,7 +28,10 @@ export class MediaViewerImageComponent implements OnInit { */ isAuthenticated$: Observable; - constructor(private authService: AuthService) {} + constructor( + protected authService: AuthService, + ) { + } /** * Thi method sets up the gallery settings and data @@ -69,20 +72,20 @@ export class MediaViewerImageComponent implements OnInit { * @param medias input NgxGalleryImage array */ convertToGalleryImage(medias: MediaViewerItem[]): NgxGalleryImage[] { - const mappadImages = []; + const mappedImages = []; for (const image of medias) { if (image.format === 'image') { - mappadImages.push({ + mappedImages.push({ small: image.thumbnail ? image.thumbnail - : './assets/images/replacement_image.svg', + : this.thumbnailPlaceholder, medium: image.thumbnail ? image.thumbnail - : './assets/images/replacement_image.svg', + : this.thumbnailPlaceholder, big: image.bitstream._links.content.href, }); } } - return mappadImages; + return mappedImages; } } diff --git a/src/app/item-page/media-viewer/media-viewer-image/themed-media-viewer-image.component.ts b/src/app/item-page/media-viewer/media-viewer-image/themed-media-viewer-image.component.ts new file mode 100644 index 0000000000..85ac779817 --- /dev/null +++ b/src/app/item-page/media-viewer/media-viewer-image/themed-media-viewer-image.component.ts @@ -0,0 +1,38 @@ +import { Component, Input } from '@angular/core'; +import { ThemedComponent } from '../../../shared/theme-support/themed.component'; +import { MediaViewerImageComponent } from './media-viewer-image.component'; +import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model'; + +/** + * Themed wrapper for {@link MediaViewerImageComponent}. + */ +@Component({ + selector: 'ds-themed-media-viewer-image', + styleUrls: [], + templateUrl: '../../../shared/theme-support/themed.component.html', +}) +export class ThemedMediaViewerImageComponent extends ThemedComponent { + + @Input() images: MediaViewerItem[]; + @Input() preview?: boolean; + @Input() image?: string; + + protected inAndOutputNames: (keyof MediaViewerImageComponent & keyof this)[] = [ + 'images', + 'preview', + 'image', + ]; + + protected getComponentName(): string { + return 'MediaViewerImageComponent'; + } + + protected importThemedComponent(themeName: string): Promise { + return import(`../../../../themes/${themeName}/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component`); + } + + protected importUnthemedComponent(): Promise { + return import('./media-viewer-image.component'); + } + +} diff --git a/src/app/item-page/media-viewer/media-viewer.component.html b/src/app/item-page/media-viewer/media-viewer.component.html index b79b91629f..b552d854d5 100644 --- a/src/app/item-page/media-viewer/media-viewer.component.html +++ b/src/app/item-page/media-viewer/media-viewer.component.html @@ -16,7 +16,7 @@ - + - + > diff --git a/src/themes/custom/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.html b/src/themes/custom/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/themes/custom/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss b/src/themes/custom/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/themes/custom/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts b/src/themes/custom/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts new file mode 100644 index 0000000000..cf73a91f23 --- /dev/null +++ b/src/themes/custom/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; +import { + MediaViewerImageComponent as BaseComponent +} from '../../../../../../app/item-page/media-viewer/media-viewer-image/media-viewer-image.component'; + +@Component({ + selector: 'ds-media-viewer-image', + // templateUrl: './media-viewer-image.component.html', + templateUrl: '../../../../../../app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.html', + // styleUrls: ['./media-viewer-image.component.scss'], + styleUrls: ['../../../../../../app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss'], +}) +export class MediaViewerImageComponent extends BaseComponent { +} diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts index 6a04b65852..98e5a0ab39 100644 --- a/src/themes/custom/theme.module.ts +++ b/src/themes/custom/theme.module.ts @@ -85,6 +85,9 @@ import { ResourcePoliciesModule } from '../../app/shared/resource-policies/resou import { ComcolModule } from '../../app/shared/comcol/comcol.module'; import { FeedbackComponent } from './app/info/feedback/feedback.component'; import { MediaViewerComponent } from './app/item-page/media-viewer/media-viewer.component'; +import { + MediaViewerImageComponent +} from './app/item-page/media-viewer/media-viewer-image/media-viewer-image.component'; import { NgxGalleryModule } from '@kolkov/ngx-gallery'; const DECLARATIONS = [ @@ -130,6 +133,7 @@ const DECLARATIONS = [ BreadcrumbsComponent, FeedbackComponent, MediaViewerComponent, + MediaViewerImageComponent, ]; @NgModule({