Themed MediaViewerVideoComponent

Author: alexandrevryghem

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

@@ -29,6 +29,7 @@ import { ThemedFullItemPageComponent } from './full/themed-full-item-page.compon
 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';
@@ -66,6 +67,7 @@ const DECLARATIONS = [
   MediaViewerComponent,
   ThemedMediaViewerComponent,
   MediaViewerVideoComponent,
+  ThemedMediaViewerVideoComponent,
   MediaViewerImageComponent,
   ThemedMediaViewerImageComponent,
   MiradorViewerComponent,

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

@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
 
 /**
- * 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',
@@ -22,8 +22,6 @@ export class MediaViewerVideoComponent implements OnInit {
     audio: './assets/images/replacement_audio.svg',
   };
 
-  replacementThumbnail: string;
-
   ngOnInit() {
     this.isCollapsed = false;
     this.filteredMedias = this.medias.filter(

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,7 +12,7 @@
             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'">

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

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

@@ -88,6 +88,9 @@ import { MediaViewerComponent } from './app/item-page/media-viewer/media-viewer.
 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 = [
@@ -134,6 +137,7 @@ const DECLARATIONS = [
   FeedbackComponent,
   MediaViewerComponent,
   MediaViewerImageComponent,
+  MediaViewerVideoComponent,
 ];
 
 @NgModule({