Merge pull request DSpace#2156 from alexandrevryghem/fix-enabling-video-mediaviewer-without-image-mediaviewer-main

Made it possible to enable video viewer without also enabling image viewer

Author: tdonohue

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 } 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,15 +13,16 @@ 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;
 
   thumbnailPlaceholder = './assets/images/replacement_image.svg';
 
-  galleryOptions: NgxGalleryOptions[];
-  galleryImages: NgxGalleryImage[];
+  galleryOptions: NgxGalleryOptions[] = [];
+
+  galleryImages: NgxGalleryImage[] = [];
 
   /**
    * Whether or not the current user is authenticated
@@ -33,11 +34,7 @@ export class MediaViewerImageComponent implements OnInit {
   ) {
   }
 
-  /**
-   * Thi method sets up the gallery settings and data
-   */
-  ngOnInit(): void {
-    this.isAuthenticated$ = this.authService.isAuthenticated();
+  ngOnChanges(): void {
     this.galleryOptions = [
       {
         preview: this.preview !== undefined ? this.preview : true,
@@ -53,7 +50,6 @@ export class MediaViewerImageComponent implements OnInit {
         previewFullscreen: true,
       },
     ];
-
     if (this.image) {
       this.galleryImages = [
         {
@@ -67,6 +63,11 @@ export class MediaViewerImageComponent implements OnInit {
     }
   }
 
+  ngOnInit(): void {
+    this.isAuthenticated$ = this.authService.isAuthenticated();
+    this.ngOnChanges();
+  }
+
   /**
    * This method convert an array of MediaViewerItem into NgxGalleryImage array
    * @param medias input NgxGalleryImage array

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

@@ -1,23 +1,22 @@
 <video
   crossorigin="anonymous"
-  #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
 >
-  <ng-container *ngIf="getMediaCap(filteredMedias[currentIndex].bitstream.name) as capInfos">
+  <ng-container *ngIf="getMediaCap(medias[currentIndex].bitstream.name, captions) as capInfos">
     <ng-container *ngFor="let capInfo of capInfos">
       <track [src]="capInfo.src" [label]="capInfo.langLabel" [srclang]="capInfo.srclang" />
     </ng-container>
   </ng-container>
 
 </video>
-<div class="buttons" *ngIf="filteredMedias?.length > 1">
+<div class="buttons" *ngIf="medias?.length > 1">
   <button
     class="btn btn-primary previous"
     [disabled]="currentIndex === 0"
@@ -28,7 +27,7 @@
 
   <button
     class="btn btn-primary next"
-    [disabled]="currentIndex === filteredMedias.length - 1"
+    [disabled]="currentIndex === medias.length - 1"
     (click)="nextMedia()"
   >
     {{ "media-viewer.next" | translate }}
@@ -44,7 +43,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)"
       >

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();
     });
 

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

@@ -1,7 +1,8 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
 import { languageHelper } from './language-helper';
-import { CaptionInfo} from './caption-info';
+import { CaptionInfo } from './caption-info';
+import { Bitstream } from 'src/app/core/shared/bitstream.model';
 
 /**
  * This component renders a video viewer and playlist for the media viewer
@@ -11,24 +12,20 @@ import { CaptionInfo} from './caption-info';
   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[];
+  @Input() captions: Bitstream[] = [];
+
+  isCollapsed = false;
 
-  isCollapsed: boolean;
   currentIndex = 0;
 
   replacements = {
     video: './assets/images/replacement_video.svg',
     audio: './assets/images/replacement_audio.svg',
   };
 
-  ngOnInit() {
-    this.isCollapsed = false;
-    this.filteredMedias = this.medias.filter((media) => media.format === 'audio' || media.format === 'video');
-  }
-
   /**
    * This method check if there is caption file for the media
    * The caption file name is the media name plus "-" following two letter
@@ -39,44 +36,39 @@ export class MediaViewerVideoComponent implements OnInit {
    * Two letter language code reference
    * https://www.w3schools.com/tags/ref_language_codes.asp
    */
-  getMediaCap(name: string): CaptionInfo[] {
-    let filteredCapMedias: MediaViewerItem[];
-    let capInfos: CaptionInfo[] = [];
-    filteredCapMedias = this.medias
-       .filter((media) => media.mimetype === 'text/vtt')
-       .filter((media) => media.bitstream.name.substring(0, (media.bitstream.name.length - 7) ).toLowerCase() === name.toLowerCase());
+  getMediaCap(name: string, captions: Bitstream[]): CaptionInfo[] {
+    const capInfos: CaptionInfo[] = [];
+    const filteredCapMedias: Bitstream[] = captions
+      .filter((media: Bitstream) => media.name.substring(0, (media.name.length - 7)).toLowerCase() === name.toLowerCase());
 
-    if (filteredCapMedias) {
-      filteredCapMedias
-        .forEach((media, index) => {
-          let srclang: string = media.bitstream.name.slice(-6, -4).toLowerCase();
-          capInfos.push(new CaptionInfo(
-            media.bitstream._links.content.href,
-            srclang,
-            languageHelper[srclang]
-          ));
-        });
+    for (const media of filteredCapMedias) {
+      let srclang: string = media.name.slice(-6, -4).toLowerCase();
+      capInfos.push(new CaptionInfo(
+        media._links.content.href,
+        srclang,
+        languageHelper[srclang],
+      ));
     }
     return capInfos;
   }
 
   /**
-   * This method sets the reviced index into currentIndex
+   * This method sets the received index into currentIndex
    * @param index Selected index
    */
   selectedMedia(index: number) {
     this.currentIndex = index;
   }
 
   /**
-   * 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--;

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

@@ -2,6 +2,7 @@ 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';
+import { Bitstream } from '../../../core/shared/bitstream.model';
 
 /**
  * Themed wrapper for {@link MediaViewerVideoComponent}.
@@ -15,8 +16,11 @@ export class ThemedMediaViewerVideoComponent extends ThemedComponent<MediaViewer
 
   @Input() medias: MediaViewerItem[];
 
+  @Input() captions: Bitstream[];
+
   protected inAndOutputNames: (keyof MediaViewerVideoComponent & keyof this)[] = [
     'medias',
+    'captions',
   ];
 
   protected getComponentName(): string {

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

@@ -5,32 +5,23 @@
     [showMessage]="false"
   ></ds-themed-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-themed-media-viewer-video [medias]="mediaList"></ds-themed-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-themed-media-viewer-video *ngIf="showVideo" [medias]="mediaList" [captions]="captions$ | async"></ds-themed-media-viewer-video>
+          <ds-themed-media-viewer-image *ngIf="showImage" [images]="mediaList"></ds-themed-media-viewer-image>
+          <ng-container *ngIf="showImage || showVideo; else showThumbnail"></ng-container>
         </ng-container>
       </ng-container>
-        <ng-container *ngIf="mediaList[0]?.format === 'image'">
-          <ds-themed-media-viewer-image [images]="mediaList"></ds-themed-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-themed-media-viewer-image
-        [image]="mediaList[0]?.thumbnail || thumbnailPlaceholder"
-        [preview]="false"
-      ></ds-themed-media-viewer-image>
     </ng-container>
   </div>
+  <ng-template #showThumbnail>
+    <ds-themed-media-viewer-image *ngIf="mediaOptions.image && mediaOptions.video"
+      [image]="(thumbnailsRD$ | async)?.payload?.page[0]?._links.content.href || thumbnailPlaceholder"
+      [preview]="false"
+    ></ds-themed-media-viewer-image>
+    <ds-thumbnail *ngIf="!(mediaOptions.image && mediaOptions.video)"
+                  [thumbnail]="(thumbnailsRD$ | async)?.payload?.page[0]">
+    </ds-thumbnail>
+  </ng-template>
 </ng-container>

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();
     });