From b63fa5f37590ca9e43c49211a904580f9a6030f0 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 14 Mar 2023 11:39:11 +0100
Subject: [PATCH] Themed MediaViewerVideoComponent

---
 src/app/item-page/item-page.module.ts         |  2 ++
 .../media-viewer-video.component.ts           |  4 +--
 .../themed-media-viewer-video.component.ts    | 34 +++++++++++++++++++
 .../media-viewer/media-viewer.component.html  |  2 +-
 .../media-viewer-video.component.html         |  0
 .../media-viewer-video.component.scss         |  0
 .../media-viewer-video.component.ts           | 14 ++++++++
 src/themes/custom/theme.module.ts             |  4 +++
 8 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 src/app/item-page/media-viewer/media-viewer-video/themed-media-viewer-video.component.ts
 create mode 100644 src/themes/custom/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.html
 create mode 100644 src/themes/custom/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss
 create mode 100644 src/themes/custom/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts

diff --git a/src/app/item-page/item-page.module.ts b/src/app/item-page/item-page.module.ts
index 485553c141..ea56a2534d 100644
--- a/src/app/item-page/item-page.module.ts
+++ b/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,
diff --git a/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts b/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts
index 4c578a51bb..d71281868e 100644
--- a/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts
+++ b/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(
diff --git a/src/app/item-page/media-viewer/media-viewer-video/themed-media-viewer-video.component.ts b/src/app/item-page/media-viewer/media-viewer-video/themed-media-viewer-video.component.ts
new file mode 100644
index 0000000000..fe685daff2
--- /dev/null
+++ b/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');
+  }
+
+}
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 b552d854d5..f16a2edaea 100644
--- a/src/app/item-page/media-viewer/media-viewer.component.html
+++ b/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'">
diff --git a/src/themes/custom/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.html b/src/themes/custom/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss b/src/themes/custom/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts b/src/themes/custom/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts
new file mode 100644
index 0000000000..c180f7dcb8
--- /dev/null
+++ b/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 {
+}
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index 98e5a0ab39..2bb428f6a6 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -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({