Themed MediaViewerImageComponent

Author: alexandrevryghem

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,
 ];

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<boolean>;
 
-  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;
   }
 }

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<MediaViewerImageComponent> {
+
+  @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<any> {
+    return import(`../../../../themes/${themeName}/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./media-viewer-image.component');
+  }
+
+}

src/app/item-page/media-viewer/media-viewer.component.html

@@ -16,7 +16,7 @@
         </ng-container>
       </ng-container>
         <ng-container *ngIf="mediaList[0]?.format === 'image'">
-          <ds-media-viewer-image [images]="mediaList"></ds-media-viewer-image>
+          <ds-themed-media-viewer-image [images]="mediaList"></ds-themed-media-viewer-image>
         </ng-container>
     </ng-container>
     <ng-container
@@ -27,10 +27,10 @@
         mediaList.length === 0
       "
     >
-      <ds-media-viewer-image
+      <ds-themed-media-viewer-image
         [image]="mediaList[0]?.thumbnail || thumbnailPlaceholder"
         [preview]="false"
-      ></ds-media-viewer-image>
+      ></ds-themed-media-viewer-image>
     </ng-container>
   </div>
 </ng-container>

src/themes/custom/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.html

@@ -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 {
+}

src/themes/custom/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss

@@ -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({