Merge remote-tracking branch 'alex/w2p-99465_themed-MediaViewerCompoent_contribute-7.2'

# Conflicts:
#	src/themes/custom/lazy-theme.module.ts

src/app/item-page/item-page.module.ts

@@ -34,8 +34,11 @@ import { ResearchEntitiesModule } from '../entity-groups/research-entities/resea
 import { ThemedItemPageComponent } from './simple/themed-item-page.component';
 import { ThemedFullItemPageComponent } from './full/themed-full-item-page.component';
 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 { ThemedMediaViewerVideoComponent } from './media-viewer/media-viewer-video/themed-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';
@@ -58,7 +61,6 @@ import {
   ThemedFullFileSectionComponent
 } from './full/field-components/file-section/themed-full-file-section.component';
 
-
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
   PublicationComponent,
@@ -87,8 +89,11 @@ const DECLARATIONS = [
   UploadBitstreamComponent,
   AbstractIncrementalListComponent,
   MediaViewerComponent,
+  ThemedMediaViewerComponent,
   MediaViewerVideoComponent,
+  ThemedMediaViewerVideoComponent,
   MediaViewerImageComponent,
+  ThemedMediaViewerImageComponent,
   MiradorViewerComponent,
   VersionPageComponent,
   OrcidPageComponent,

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-video/media-viewer-video.component.ts

@@ -4,7 +4,7 @@ import { languageHelper } from './language-helper';
 import { CaptionInfo} from './caption-info';
 
 /**
- * This componenet renders a video viewer and playlist for the media viewer
+ * This component renders a video viewer and playlist for the media viewer
  */
 @Component({
   selector: 'ds-media-viewer-video',
@@ -24,8 +24,6 @@ export class MediaViewerVideoComponent implements OnInit {
     audio: './assets/images/replacement_audio.svg',
   };
 
-  replacementThumbnail: string;
-
   ngOnInit() {
     this.isCollapsed = false;
     this.filteredMedias = this.medias.filter((media) => media.format === 'audio' || media.format === 'video');

src/app/item-page/media-viewer/media-viewer-video/themed-media-viewer-video.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input } from '@angular/core';
+import { ThemedComponent } from '../../../shared/theme-support/themed.component';
+import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
+import { MediaViewerVideoComponent } from './media-viewer-video.component';
+
+/**
+ * Themed wrapper for {@link MediaViewerVideoComponent}.
+ */
+@Component({
+  selector: 'ds-themed-media-viewer-video',
+  styleUrls: [],
+  templateUrl: '../../../shared/theme-support/themed.component.html',
+})
+export class ThemedMediaViewerVideoComponent extends ThemedComponent<MediaViewerVideoComponent> {
+
+  @Input() medias: MediaViewerItem[];
+
+  protected inAndOutputNames: (keyof MediaViewerVideoComponent & keyof this)[] = [
+    'medias',
+  ];
+
+  protected getComponentName(): string {
+    return 'MediaViewerImageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../../themes/${themeName}/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./media-viewer-video.component');
+  }
+
+}

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

@@ -12,11 +12,11 @@
             mediaList[0]?.format === 'video' || mediaList[0]?.format === 'audio'
           "
         >
-          <ds-media-viewer-video [medias]="mediaList"></ds-media-viewer-video>
+          <ds-themed-media-viewer-video [medias]="mediaList"></ds-themed-media-viewer-video>
         </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/app/item-page/media-viewer/media-viewer.component.spec.ts

@@ -135,7 +135,7 @@ describe('MediaViewerComponent', () => {
 
     it('should display a default, thumbnail', () => {
       const defaultThumbnail = fixture.debugElement.query(
-        By.css('ds-media-viewer-image')
+        By.css('ds-themed-media-viewer-image')
       );
       expect(defaultThumbnail.nativeElement).toBeDefined();
     });

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

@@ -13,9 +13,8 @@ import { hasValue } from '../../shared/empty.util';
 import { followLink } from '../../shared/utils/follow-link-config.model';
 
 /**
- * This componenet renders the media viewers
+ * This component renders the media viewers
  */
-
 @Component({
   selector: 'ds-media-viewer',
   templateUrl: './media-viewer.component.html',

src/app/item-page/media-viewer/themed-media-viewer.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { MediaViewerComponent } from './media-viewer.component';
+import { Item } from '../../core/shared/item.model';
+
+/**
+ * Themed wrapper for {@link MediaViewerComponent}.
+ */
+@Component({
+  selector: 'ds-themed-media-viewer',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedMediaViewerComponent extends ThemedComponent<MediaViewerComponent> {
+
+  @Input() item: Item;
+  @Input() videoOptions: boolean;
+
+  protected inAndOutputNames: (keyof MediaViewerComponent & keyof this)[] = [
+    'item',
+    'videoOptions',
+  ];
+
+  protected getComponentName(): string {
+    return 'MediaViewerComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/item-page/media-viewer/media-viewer.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./media-viewer.component');
+  }
+
+}

src/app/item-page/simple/item-types/publication/publication.component.html

@@ -21,7 +21,7 @@
       </ds-metadata-field-wrapper>
     </ng-container>
     <ng-container *ngIf="mediaViewer.image">
-      <ds-media-viewer [item]="object" [videoOptions]="mediaViewer.video"></ds-media-viewer>
+      <ds-themed-media-viewer [item]="object" [videoOptions]="mediaViewer.video"></ds-themed-media-viewer>
     </ng-container>
     <ds-themed-item-page-file-section [item]="object"></ds-themed-item-page-file-section>
     <ds-item-page-date-field [item]="object"></ds-item-page-date-field>

src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

@@ -22,7 +22,7 @@
       </ds-metadata-field-wrapper>
     </ng-container>
     <ng-container *ngIf="mediaViewer.image">
-      <ds-media-viewer [item]="object" [videoOptions]="mediaViewer.video"></ds-media-viewer>
+      <ds-themed-media-viewer [item]="object" [videoOptions]="mediaViewer.video"></ds-themed-media-viewer>
     </ng-container>
     <ds-themed-item-page-file-section [item]="object"></ds-themed-item-page-file-section>
     <ds-item-page-date-field [item]="object"></ds-item-page-date-field>

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

src/themes/custom/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {
+  MediaViewerVideoComponent as BaseComponent
+} from '../../../../../../app/item-page/media-viewer/media-viewer-video/media-viewer-video.component';
+
+@Component({
+  selector: 'ds-media-viewer-video',
+  // templateUrl: './media-viewer-video.component.html',
+  templateUrl: '../../../../../../app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.html',
+  // styleUrls: ['./media-viewer-video.component.scss'],
+  styleUrls: ['../../../../../../app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss'],
+})
+export class MediaViewerVideoComponent extends BaseComponent {
+}

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {
+  MediaViewerComponent as BaseComponent
+} from '../../../../../app/item-page/media-viewer/media-viewer.component';
+
+@Component({
+  selector: 'ds-media-viewer',
+  // templateUrl: './media-viewer.component.html',
+  templateUrl: '../../../../../app/item-page/media-viewer/media-viewer.component.html',
+  // styleUrls: ['./media-viewer.component.scss'],
+  styleUrls: ['../../../../../app/item-page/media-viewer/media-viewer.component.scss'],
+})
+export class MediaViewerComponent extends BaseComponent {
+}

src/themes/custom/lazy-theme.module.ts

@@ -137,6 +137,14 @@ import { FeedbackFormComponent } from './app/info/feedback/feedback-form/feedbac
 import {
   ItemPageTitleFieldComponent
 } from './app/item-page/simple/field-components/specific-field/title/item-page-title-field.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 {
+  MediaViewerVideoComponent
+} from './app/item-page/media-viewer/media-viewer-video/media-viewer-video.component';
+import { NgxGalleryModule } from '@kolkov/ngx-gallery';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -200,8 +208,10 @@ const DECLARATIONS = [
   MetadataRepresentationListComponent,
   DsDynamicLookupRelationSearchTabComponent,
   DsDynamicLookupRelationExternalSourceTabComponent,
-  FeedbackComponent,
   ItemPageTitleFieldComponent,
+  MediaViewerComponent,
+  MediaViewerImageComponent,
+  MediaViewerVideoComponent,
 ];
 
 @NgModule({
@@ -258,7 +268,8 @@ const DECLARATIONS = [
     ResourcePoliciesModule,
     ComcolModule,
     DsoSharedModule,
-    SystemWideAlertModule
+    SystemWideAlertModule,
+    NgxGalleryModule,
   ],
   declarations: DECLARATIONS,
   exports: [