Themed MediaViewerComponent

Author: alexandrevryghem

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

@@ -27,6 +27,7 @@ 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 { MediaViewerImageComponent } from './media-viewer/media-viewer-image/media-viewer-image.component';
 import { NgxGalleryModule } from '@kolkov/ngx-gallery';
@@ -35,7 +36,6 @@ import { VersionPageComponent } from './version-page/version-page/version-page.c
 import { VersionedItemComponent } from './simple/item-types/versioned-item/versioned-item.component';
 import { ThemedFileSectionComponent } from './simple/field-components/file-section/themed-file-section.component';
 
-
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
   PublicationComponent,
@@ -63,6 +63,7 @@ const DECLARATIONS = [
   UploadBitstreamComponent,
   AbstractIncrementalListComponent,
   MediaViewerComponent,
+  ThemedMediaViewerComponent,
   MediaViewerVideoComponent,
   MediaViewerImageComponent,
   MiradorViewerComponent,

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

@@ -23,7 +23,7 @@ <h2 class="item-page-title-field mr-auto">
       </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

@@ -26,7 +26,7 @@ <h2 class="item-page-title-field mr-auto">
       </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.component.html

@@ -0,0 +1 @@
+

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

@@ -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/app/item-page/media-viewer/media-viewer.component.ts

@@ -84,6 +84,8 @@ import { SearchModule } from '../../app/shared/search/search.module';
 import { ResourcePoliciesModule } from '../../app/shared/resource-policies/resource-policies.module';
 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 { NgxGalleryModule } from '@kolkov/ngx-gallery';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -126,7 +128,8 @@ const DECLARATIONS = [
   NavbarComponent,
   HeaderNavbarWrapperComponent,
   BreadcrumbsComponent,
-  FeedbackComponent
+  FeedbackComponent,
+  MediaViewerComponent,
 ];
 
 @NgModule({
@@ -176,7 +179,8 @@ const DECLARATIONS = [
     SearchModule,
     FormsModule,
     ResourcePoliciesModule,
-    ComcolModule
+    ComcolModule,
+    NgxGalleryModule,
   ],
   declarations: DECLARATIONS
 })