From aa4d56e2cf1b3158e56c3a1644f4722e70e838bc Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 19 Mar 2023 11:42:09 +0100
Subject: [PATCH 1/3] Made it possible to only enable video media viewer

Also:
- Filtered out non-supported media file types from the mediaViewers mediaList
- Fixed thumbnails not displaying with 0 ORIGINAL bitstreams
---
 .../media-viewer-image.component.ts           | 17 ++---
 .../media-viewer-video.component.html         | 13 ++--
 .../media-viewer-video.component.spec.ts      |  2 -
 .../media-viewer-video.component.ts           | 20 ++----
 .../media-viewer/media-viewer.component.html  | 36 ++++------
 .../media-viewer.component.spec.ts            | 12 +++-
 .../media-viewer/media-viewer.component.ts    | 67 ++++++++++++-------
 .../publication/publication.component.html    |  6 +-
 .../untyped-item/untyped-item.component.html  |  6 +-
 9 files changed, 89 insertions(+), 90 deletions(-)

diff --git a/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts b/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts
index 0c32b5603de..28c5b4efd6c 100644
--- a/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts
+++ b/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { NgxGalleryImage, NgxGalleryOptions } from '@kolkov/ngx-gallery';
 import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
 import { NgxGalleryAnimation } from '@kolkov/ngx-gallery';
@@ -13,7 +13,7 @@ import { AuthService } from '../../../core/auth/auth.service';
   templateUrl: './media-viewer-image.component.html',
   styleUrls: ['./media-viewer-image.component.scss'],
 })
-export class MediaViewerImageComponent implements OnInit {
+export class MediaViewerImageComponent implements OnChanges, OnInit {
   @Input() images: MediaViewerItem[];
   @Input() preview?: boolean;
   @Input() image?: string;
@@ -30,11 +30,9 @@ export class MediaViewerImageComponent implements OnInit {
 
   constructor(private authService: AuthService) {}
 
-  /**
-   * Thi method sets up the gallery settings and data
-   */
-  ngOnInit(): void {
-    this.isAuthenticated$ = this.authService.isAuthenticated();
+  ngOnChanges(changes: SimpleChanges): void {
+    this.image = changes.image.currentValue;
+    this.preview = changes.preview.currentValue;
     this.galleryOptions = [
       {
         preview: this.preview !== undefined ? this.preview : true,
@@ -50,7 +48,6 @@ export class MediaViewerImageComponent implements OnInit {
         previewFullscreen: true,
       },
     ];
-
     if (this.image) {
       this.galleryImages = [
         {
@@ -64,6 +61,10 @@ export class MediaViewerImageComponent implements OnInit {
     }
   }
 
+  ngOnInit(): void {
+    this.isAuthenticated$ = this.authService.isAuthenticated();
+  }
+
   /**
    * This method convert an array of MediaViewerItem into NgxGalleryImage array
    * @param medias input NgxGalleryImage array
diff --git a/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.html b/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.html
index a4493e36fc0..aaec542f828 100644
--- a/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.html
+++ b/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.html
@@ -1,15 +1,14 @@
 <video
-  #media
-  [src]="filteredMedias[currentIndex].bitstream._links.content.href"
+  [src]="medias[currentIndex].bitstream._links.content.href"
   id="singleVideo"
   [poster]="
-    filteredMedias[currentIndex].thumbnail ||
-    replacements[filteredMedias[currentIndex].format]
+    medias[currentIndex].thumbnail ||
+    replacements[medias[currentIndex].format]
   "
   preload="none"
   controls
 ></video>
-<div class="buttons" *ngIf="filteredMedias?.length > 1">
+<div class="buttons" *ngIf="medias?.length > 1">
   <button
     class="btn btn-primary previous"
     [disabled]="currentIndex === 0"
@@ -20,7 +19,7 @@
 
   <button
     class="btn btn-primary next"
-    [disabled]="currentIndex === filteredMedias.length - 1"
+    [disabled]="currentIndex === medias.length - 1"
     (click)="nextMedia()"
   >
     {{ "media-viewer.next" | translate }}
@@ -36,7 +35,7 @@
     <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
       <button
         ngbDropdownItem
-        *ngFor="let item of filteredMedias; index as indexOfelement"
+        *ngFor="let item of medias; index as indexOfelement"
         class="list-element"
         (click)="selectedMedia(indexOfelement)"
       >
diff --git a/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.spec.ts b/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.spec.ts
index 354ba57727c..84849d7eb7b 100644
--- a/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.spec.ts
+++ b/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.spec.ts
@@ -83,7 +83,6 @@ describe('MediaViewerVideoComponent', () => {
     fixture = TestBed.createComponent(MediaViewerVideoComponent);
     component = fixture.componentInstance;
     component.medias = mockMediaViewerItem;
-    component.filteredMedias = mockMediaViewerItem;
     fixture.detectChanges();
   });
 
@@ -94,7 +93,6 @@ describe('MediaViewerVideoComponent', () => {
   describe('should show controller buttons when the having mode then one video', () => {
     beforeEach(() => {
       component.medias = mockMediaViewerItems;
-      component.filteredMedias = mockMediaViewerItems;
       fixture.detectChanges();
     });
 
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 4c578a51bb2..eda1abfa537 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
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
 
 /**
@@ -9,12 +9,11 @@ import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
   templateUrl: './media-viewer-video.component.html',
   styleUrls: ['./media-viewer-video.component.scss'],
 })
-export class MediaViewerVideoComponent implements OnInit {
+export class MediaViewerVideoComponent {
   @Input() medias: MediaViewerItem[];
 
-  filteredMedias: MediaViewerItem[];
+  isCollapsed = false;
 
-  isCollapsed: boolean;
   currentIndex = 0;
 
   replacements = {
@@ -24,15 +23,8 @@ export class MediaViewerVideoComponent implements OnInit {
 
   replacementThumbnail: string;
 
-  ngOnInit() {
-    this.isCollapsed = false;
-    this.filteredMedias = this.medias.filter(
-      (media) => media.format === 'audio' || media.format === 'video'
-    );
-  }
-
   /**
-   * This method sets the reviced index into currentIndex
+   * This method sets the received index into currentIndex
    * @param index Selected index
    */
   selectedMedia(index: number) {
@@ -40,14 +32,14 @@ export class MediaViewerVideoComponent implements OnInit {
   }
 
   /**
-   * This method increade the number of the currentIndex
+   * This method increases the number of the currentIndex
    */
   nextMedia() {
     this.currentIndex++;
   }
 
   /**
-   * This method decrese the number of the currentIndex
+   * This method decreases the number of the currentIndex
    */
   prevMedia() {
     this.currentIndex--;
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 b79b91629f6..3d2a863f61b 100644
--- a/src/app/item-page/media-viewer/media-viewer.component.html
+++ b/src/app/item-page/media-viewer/media-viewer.component.html
@@ -5,32 +5,20 @@
     [showMessage]="false"
   ></ds-loading>
   <div class="media-viewer" *ngIf="!isLoading">
-    <ng-container *ngIf="mediaList.length > 0">
-      <ng-container *ngIf="videoOptions">
-        <ng-container
-          *ngIf="
-            mediaList[0]?.format === 'video' || mediaList[0]?.format === 'audio'
-          "
-        >
-          <ds-media-viewer-video [medias]="mediaList"></ds-media-viewer-video>
+    <ng-container *ngIf="mediaList.length > 0; else showThumbnail">
+      <ng-container *ngVar="mediaOptions.video && ['audio', 'video'].includes(mediaList[0]?.format) as showVideo">
+        <ng-container *ngVar="mediaOptions.image && mediaList[0]?.format === 'image' as showImage">
+          <ds-media-viewer-video *ngIf="showVideo" [medias]="mediaList"></ds-media-viewer-video>
+          <ds-media-viewer-image *ngIf="showImage" [images]="mediaList"></ds-media-viewer-image>
+          <ng-container *ngIf="showImage || showVideo; else showThumbnail"></ng-container>
         </ng-container>
       </ng-container>
-        <ng-container *ngIf="mediaList[0]?.format === 'image'">
-          <ds-media-viewer-image [images]="mediaList"></ds-media-viewer-image>
-        </ng-container>
-    </ng-container>
-    <ng-container
-      *ngIf="
-        ((mediaList[0]?.format !== 'image') &&
-          (!videoOptions || mediaList[0]?.format !== 'video') &&
-          (!videoOptions || mediaList[0]?.format !== 'audio')) ||
-        mediaList.length === 0
-      "
-    >
-      <ds-media-viewer-image
-        [image]="mediaList[0]?.thumbnail || thumbnailPlaceholder"
-        [preview]="false"
-      ></ds-media-viewer-image>
     </ng-container>
   </div>
+  <ng-template #showThumbnail>
+    <ds-media-viewer-image
+      [image]="(thumbnailsRD$ | async)?.payload?.page[0]?._links.content.href || thumbnailPlaceholder"
+      [preview]="false"
+    ></ds-media-viewer-image>
+  </ng-template>
 </ng-container>
diff --git a/src/app/item-page/media-viewer/media-viewer.component.spec.ts b/src/app/item-page/media-viewer/media-viewer.component.spec.ts
index cfd72bf4164..c224d5c5282 100644
--- a/src/app/item-page/media-viewer/media-viewer.component.spec.ts
+++ b/src/app/item-page/media-viewer/media-viewer.component.spec.ts
@@ -61,7 +61,7 @@ describe('MediaViewerComponent', () => {
   );
 
   beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+    return TestBed.configureTestingModule({
       imports: [
         TranslateModule.forRoot({
           loader: {
@@ -94,7 +94,10 @@ describe('MediaViewerComponent', () => {
   describe('when the bitstreams are loading', () => {
     beforeEach(() => {
       comp.mediaList$.next([mockMediaViewerItem]);
-      comp.videoOptions = true;
+      comp.mediaOptions = {
+        image: true,
+        video: true,
+      };
       comp.isLoading = true;
       fixture.detectChanges();
     });
@@ -118,7 +121,10 @@ describe('MediaViewerComponent', () => {
   describe('when the bitstreams loading is failed', () => {
     beforeEach(() => {
       comp.mediaList$.next([]);
-      comp.videoOptions = true;
+      comp.mediaOptions = {
+        image: true,
+        video: true,
+      };
       comp.isLoading = false;
       fixture.detectChanges();
     });
diff --git a/src/app/item-page/media-viewer/media-viewer.component.ts b/src/app/item-page/media-viewer/media-viewer.component.ts
index 3f9de8ed3e1..3eb15ec8b38 100644
--- a/src/app/item-page/media-viewer/media-viewer.component.ts
+++ b/src/app/item-page/media-viewer/media-viewer.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { filter, take } from 'rxjs/operators';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
@@ -11,6 +11,9 @@ import { MediaViewerItem } from '../../core/shared/media-viewer-item.model';
 import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
 import { hasValue } from '../../shared/empty.util';
 import { followLink } from '../../shared/utils/follow-link-config.model';
+import { MediaViewerConfig } from '../../../config/media-viewer-config.interface';
+import { environment } from '../../../environments/environment';
+import { Subscription } from 'rxjs/internal/Subscription';
 
 /**
  * This componenet renders the media viewers
@@ -21,51 +24,67 @@ import { followLink } from '../../shared/utils/follow-link-config.model';
   templateUrl: './media-viewer.component.html',
   styleUrls: ['./media-viewer.component.scss'],
 })
-export class MediaViewerComponent implements OnInit {
+export class MediaViewerComponent implements OnDestroy, OnInit {
   @Input() item: Item;
-  @Input() videoOptions: boolean;
 
-  mediaList$: BehaviorSubject<MediaViewerItem[]>;
+  @Input() mediaOptions: MediaViewerConfig = environment.mediaViewer;
 
-  isLoading: boolean;
+  mediaList$: BehaviorSubject<MediaViewerItem[]> = new BehaviorSubject([]);
+
+  isLoading = true;
 
   thumbnailPlaceholder = './assets/images/replacement_document.svg';
 
-  constructor(protected bitstreamDataService: BitstreamDataService) {}
+  thumbnailsRD$: Observable<RemoteData<PaginatedList<Bitstream>>>;
+
+  subs: Subscription[] = [];
+
+  constructor(
+    protected bitstreamDataService: BitstreamDataService,
+  ) {
+  }
+
+  ngOnDestroy(): void {
+    this.subs.forEach((subscription: Subscription) => subscription.unsubscribe());
+  }
 
   /**
-   * This metod loads all the Bitstreams and Thumbnails and contert it to media item
+   * This method loads all the Bitstreams and Thumbnails and converts it to {@link MediaViewerItem}s
    */
   ngOnInit(): void {
-    this.mediaList$ = new BehaviorSubject([]);
-    this.isLoading = true;
-    this.loadRemoteData('ORIGINAL').subscribe((bitstreamsRD) => {
+    const types: string[] = [
+      ...(this.mediaOptions.image ? ['image'] : []),
+      ...(this.mediaOptions.video ? ['audio', 'video'] : []),
+    ];
+    this.thumbnailsRD$ = this.loadRemoteData('THUMBNAIL');
+    this.subs.push(this.loadRemoteData('ORIGINAL').subscribe((bitstreamsRD: RemoteData<PaginatedList<Bitstream>>) => {
       if (bitstreamsRD.payload.page.length === 0) {
         this.isLoading = false;
         this.mediaList$.next([]);
       } else {
-        this.loadRemoteData('THUMBNAIL').subscribe((thumbnailsRD) => {
+        this.subs.push(this.thumbnailsRD$.subscribe((thumbnailsRD: RemoteData<PaginatedList<Bitstream>>) => {
           for (
             let index = 0;
             index < bitstreamsRD.payload.page.length;
             index++
           ) {
-            bitstreamsRD.payload.page[index].format
+            this.subs.push(bitstreamsRD.payload.page[index].format
               .pipe(getFirstSucceededRemoteDataPayload())
-              .subscribe((format) => {
-                const current = this.mediaList$.getValue();
+              .subscribe((format: BitstreamFormat) => {
                 const mediaItem = this.createMediaViewerItem(
                   bitstreamsRD.payload.page[index],
                   format,
                   thumbnailsRD.payload && thumbnailsRD.payload.page[index]
                 );
-                this.mediaList$.next([...current, mediaItem]);
-              });
+                if (types.includes(mediaItem.format)) {
+                  this.mediaList$.next([...this.mediaList$.getValue(), mediaItem]);
+                }
+              }));
           }
           this.isLoading = false;
-        });
+        }));
       }
-    });
+    }));
   }
 
   /**
@@ -95,16 +114,12 @@ export class MediaViewerComponent implements OnInit {
   }
 
   /**
-   * This method create MediaViewerItem from incoming bitstreams
-   * @param original original remote data bitstream
+   * This method creates a {@link MediaViewerItem} from incoming {@link Bitstream}s
+   * @param original original bitstream
    * @param format original bitstream format
-   * @param thumbnail trunbnail remote data bitstream
+   * @param thumbnail thumbnail bitstream
    */
-  createMediaViewerItem(
-    original: Bitstream,
-    format: BitstreamFormat,
-    thumbnail: Bitstream
-  ): MediaViewerItem {
+  createMediaViewerItem(original: Bitstream, format: BitstreamFormat, thumbnail: Bitstream): MediaViewerItem {
     const mediaItem = new MediaViewerItem();
     mediaItem.bitstream = original;
     mediaItem.format = format.mimetype.split('/')[0];
diff --git a/src/app/item-page/simple/item-types/publication/publication.component.html b/src/app/item-page/simple/item-types/publication/publication.component.html
index bace9fcd0ad..08ae49f24e4 100644
--- a/src/app/item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/item-page/simple/item-types/publication/publication.component.html
@@ -17,13 +17,13 @@ <h2 class="item-page-title-field mr-auto">
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
-    <ng-container *ngIf="!mediaViewer.image">
+    <ng-container *ngIf="!(mediaViewer.image || mediaViewer.video)">
       <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
         <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
-    <ng-container *ngIf="mediaViewer.image">
-      <ds-media-viewer [item]="object" [videoOptions]="mediaViewer.video"></ds-media-viewer>
+    <ng-container *ngIf="mediaViewer.image || mediaViewer.video">
+      <ds-media-viewer [item]="object"></ds-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>
diff --git a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
index 04794717f1f..7eb896f8aee 100644
--- a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
+++ b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
@@ -20,13 +20,13 @@ <h2 class="item-page-title-field mr-auto">
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
-    <ng-container *ngIf="!mediaViewer.image">
+    <ng-container *ngIf="!(mediaViewer.image || mediaViewer.video)">
       <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
         <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
-    <ng-container *ngIf="mediaViewer.image">
-      <ds-media-viewer [item]="object" [videoOptions]="mediaViewer.video"></ds-media-viewer>
+    <ng-container *ngIf="mediaViewer.image || mediaViewer.video">
+      <ds-media-viewer [item]="object"></ds-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>

From 43dd508b10e4ca8dd5238080e60ad7900c0f6bae Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 26 Mar 2023 01:04:02 +0100
Subject: [PATCH 2/3] Fix placeholder not being shown for items with not
 THUMBNAIL bitstreams

---
 .../media-viewer-image.component.ts                  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts b/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts
index 28c5b4efd6c..59a9513d4f0 100644
--- a/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts
+++ b/src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
 import { NgxGalleryImage, NgxGalleryOptions } from '@kolkov/ngx-gallery';
 import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
 import { NgxGalleryAnimation } from '@kolkov/ngx-gallery';
@@ -20,8 +20,9 @@ export class MediaViewerImageComponent implements OnChanges, OnInit {
 
   loggedin: boolean;
 
-  galleryOptions: NgxGalleryOptions[];
-  galleryImages: NgxGalleryImage[];
+  galleryOptions: NgxGalleryOptions[] = [];
+
+  galleryImages: NgxGalleryImage[] = [];
 
   /**
    * Whether or not the current user is authenticated
@@ -30,9 +31,7 @@ export class MediaViewerImageComponent implements OnChanges, OnInit {
 
   constructor(private authService: AuthService) {}
 
-  ngOnChanges(changes: SimpleChanges): void {
-    this.image = changes.image.currentValue;
-    this.preview = changes.preview.currentValue;
+  ngOnChanges(): void {
     this.galleryOptions = [
       {
         preview: this.preview !== undefined ? this.preview : true,
@@ -63,6 +62,7 @@ export class MediaViewerImageComponent implements OnChanges, OnInit {
 
   ngOnInit(): void {
     this.isAuthenticated$ = this.authService.isAuthenticated();
+    this.ngOnChanges();
   }
 
   /**

From 44699186406c10aebfa40b49772a0d62a204abaa Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 4 Apr 2023 22:05:09 +0200
Subject: [PATCH 3/3] Show ThumbnailComponent as fallback instead of a
 MediaViewerImageComponent placeholder when only one of the mediaviewers
 options is enabled

---
 src/app/item-page/media-viewer/media-viewer.component.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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 3d2a863f61b..b9b7ba1932e 100644
--- a/src/app/item-page/media-viewer/media-viewer.component.html
+++ b/src/app/item-page/media-viewer/media-viewer.component.html
@@ -16,9 +16,12 @@
     </ng-container>
   </div>
   <ng-template #showThumbnail>
-    <ds-media-viewer-image
+    <ds-media-viewer-image *ngIf="mediaOptions.image && mediaOptions.video"
       [image]="(thumbnailsRD$ | async)?.payload?.page[0]?._links.content.href || thumbnailPlaceholder"
       [preview]="false"
     ></ds-media-viewer-image>
+    <ds-thumbnail *ngIf="!(mediaOptions.image && mediaOptions.video)"
+                  [thumbnail]="(thumbnailsRD$ | async)?.payload?.page[0]">
+    </ds-thumbnail>
   </ng-template>
 </ng-container>