From af79945fd865be08e027f065942e412da6770563 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= <dsipos@monguz.hu>
Date: Fri, 6 Nov 2020 11:05:20 +0100
Subject: [PATCH] #885 add enviroment variable for media viewer

---
 .editorconfig                                 |  3 ++
 .../media-viewer-image.component.ts           |  7 +++++
 .../media-viewer-video.component.html         |  6 ++--
 .../media-viewer/media-viewer.component.html  | 31 ++++++++++++-------
 .../media-viewer/media-viewer.component.ts    | 15 ++++++---
 .../publication/publication.component.html    | 13 +++++---
 .../item-types/shared/item.component.ts       |  3 ++
 src/app/app.component.scss                    |  5 +++
 src/assets/i18n/en.json5                      |  2 +-
 src/config/global-config.interface.ts         |  6 ++--
 src/config/media-viewer-config.interface.ts   |  7 +++++
 src/environments/environment.common.ts        |  5 +++
 12 files changed, 76 insertions(+), 27 deletions(-)
 create mode 100644 src/config/media-viewer-config.interface.ts

diff --git a/.editorconfig b/.editorconfig
index 70ce43b68e..15d4c87b14 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -12,3 +12,6 @@ trim_trailing_whitespace = true
 [*.md]
 insert_final_newline = false
 trim_trailing_whitespace = false
+
+[*.ts]
+quote_type = single
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 b3993d2805..9069658d86 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
@@ -12,6 +12,7 @@ import { NgxGalleryAnimation } from '@kolkov/ngx-gallery';
 })
 export class MediaViewerImageComponent implements OnInit {
   @Input() images: MediaViewerItem[];
+  @Input() preview?: boolean;
   @Input() image?: string;
 
   galleryOptions: NgxGalleryOptions[];
@@ -21,8 +22,10 @@ export class MediaViewerImageComponent implements OnInit {
    * Thi method sets up the gallery settings and data
    */
   ngOnInit(): void {
+    console.log(this.preview);
     this.galleryOptions = [
       {
+        preview: this.preview !== undefined ? this.preview : true,
         image: true,
         imageSize: 'contain',
         thumbnails: false,
@@ -31,6 +34,10 @@ export class MediaViewerImageComponent implements OnInit {
         height: '279px',
         startIndex: 0,
         imageAnimation: NgxGalleryAnimation.Slide,
+        previewCloseOnEsc: true,
+        previewZoom: true,
+        previewRotate: true,
+        previewFullscreen: true,
       },
     ];
 
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 e190475e84..9fb02c445a 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
@@ -12,15 +12,15 @@
   ></video>
   <div class="buttons" *ngIf="medias?.length > 1">
     <button
-      class="btn btn-primary previus"
+      class="btn btn-primary previous"
       [disabled]="currentIndex === 0"
       (click)="prevMedia()"
     >
-      {{ "media-viewer.previus" | translate }}
+      {{ "media-viewer.previous" | translate }}
     </button>
 
     <button
-      class="btn btn-primary next "
+      class="btn btn-primary next"
       [disabled]="currentIndex === medias.length - 1"
       (click)="nextMedia()"
     >
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 c6f0468e85..4a59f1fc68 100644
--- a/src/app/+item-page/media-viewer/media-viewer.component.html
+++ b/src/app/+item-page/media-viewer/media-viewer.component.html
@@ -5,24 +5,31 @@
     [showMessage]="false"
   ></ds-loading>
   <div class="media-viewer" *ngIf="mediaList.length > 0">
-    <ng-container
-      *ngIf="
-        mediaList[0]?.format === 'video' || mediaList[0]?.format === 'audio'
-      "
-    >
-      <ds-media-viewer-video [medias]="mediaList"></ds-media-viewer-video>
+    <ng-container *ngIf="options.video">
+      <ng-container
+        *ngIf="
+          mediaList[0]?.format === 'video' || mediaList[0]?.format === 'audio'
+        "
+      >
+        <ds-media-viewer-video [medias]="mediaList"></ds-media-viewer-video>
+      </ng-container>
     </ng-container>
-    <ng-container *ngIf="mediaList[0]?.format === 'image'">
-      <ds-media-viewer-image [images]="mediaList"></ds-media-viewer-image>
+    <ng-container *ngIf="options.image">
+      <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' &&
-        mediaList[0]?.format !== 'video' &&
-        mediaList[0]?.format !== 'audio'
+        (!options.image || mediaList[0]?.format !== 'image') &&
+        (!options.video || mediaList[0]?.format !== 'video') &&
+        (!options.video || mediaList[0]?.format !== 'audio')
       "
     >
-      <ds-media-viewer-image [image]="mediaList[0]?.thumbnail || thumbnailPlaceholder"></ds-media-viewer-image>
+      <ds-media-viewer-image
+        [image]="mediaList[0]?.thumbnail || thumbnailPlaceholder"
+        [preview]="false"
+      ></ds-media-viewer-image>
     </ng-container>
   </div>
 </ng-container>
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 938ad6c2d6..a8d50beff5 100644
--- a/src/app/+item-page/media-viewer/media-viewer.component.ts
+++ b/src/app/+item-page/media-viewer/media-viewer.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { filter, take } from 'rxjs/operators';
+import { MediaViewerConfig } from '../../../config/media-viewer-config.interface';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
 import { PaginatedList } from '../../core/data/paginated-list';
 import { RemoteData } from '../../core/data/remote-data';
@@ -23,6 +24,7 @@ import { followLink } from '../../shared/utils/follow-link-config.model';
 })
 export class MediaViewerComponent implements OnInit {
   @Input() item: Item;
+  @Input() options: MediaViewerConfig;
 
   mediaList$: BehaviorSubject<MediaViewerItem[]>;
 
@@ -30,9 +32,7 @@ export class MediaViewerComponent implements OnInit {
 
   thumbnailPlaceholder = './assets/images/replacement_document.svg';
 
-  constructor(
-    protected bitstreamDataService: BitstreamDataService,
-  ) {}
+  constructor(protected bitstreamDataService: BitstreamDataService) {}
 
   /**
    * This metod loads all the Bitstreams and Thumbnails and contert it to media item
@@ -44,7 +44,7 @@ export class MediaViewerComponent implements OnInit {
       this.loadRemoteData('THUMBNAIL').subscribe((thumbnailsRD) => {
         for (let index = 0; index < bitstreamsRD.payload.page.length; index++) {
           bitstreamsRD.payload.page[index].format
-          .pipe(getFirstSucceededRemoteDataPayload())
+            .pipe(getFirstSucceededRemoteDataPayload())
             .subscribe((format) => {
               const current = this.mediaList$.getValue();
               const mediaItem = this.createMediaViewerItem(
@@ -68,7 +68,12 @@ export class MediaViewerComponent implements OnInit {
     bundleName: string
   ): Observable<RemoteData<PaginatedList<Bitstream>>> {
     return this.bitstreamDataService
-      .findAllByItemAndBundleName(this.item, bundleName, {}, followLink('format'))
+      .findAllByItemAndBundleName(
+        this.item,
+        bundleName,
+        {},
+        followLink('format')
+      )
       .pipe(
         filter(
           (bitstreamsRD: RemoteData<PaginatedList<Bitstream>>) =>
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 4b802ac583..22b1317d6c 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
@@ -3,10 +3,15 @@
 </h2>
 <div class="row">
   <div class="col-xs-12 col-md-4">
-    <!-- <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
-    </ds-metadata-field-wrapper> -->
-    <ds-media-viewer [item]="object"></ds-media-viewer>
+    <ng-container *ngIf="!mediaViewer.enable">
+    
+      <ds-metadata-field-wrapper>
+        <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
+      </ds-metadata-field-wrapper>
+    </ng-container>
+    <ng-container *ngIf="mediaViewer.enable">
+      <ds-media-viewer [item]="object" [options]="mediaViewer"></ds-media-viewer>
+    </ng-container>
     <ds-item-page-file-section [item]="object"></ds-item-page-file-section>
     <ds-item-page-date-field [item]="object"></ds-item-page-date-field>
     <ds-item-page-author-field [item]="object"></ds-item-page-author-field>
diff --git a/src/app/+item-page/simple/item-types/shared/item.component.ts b/src/app/+item-page/simple/item-types/shared/item.component.ts
index abfcd24346..621e1afab7 100644
--- a/src/app/+item-page/simple/item-types/shared/item.component.ts
+++ b/src/app/+item-page/simple/item-types/shared/item.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
+import { environment } from '../../../../../environments/environment';
 import { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
 import { Bitstream } from '../../../../core/shared/bitstream.model';
 import { Item } from '../../../../core/shared/item.model';
@@ -15,6 +16,8 @@ import { getFirstSucceededRemoteDataPayload } from '../../../../core/shared/oper
 export class ItemComponent {
   @Input() object: Item;
 
+  mediaViewer = environment.mediaViewer
+
   constructor(protected bitstreamDataService: BitstreamDataService) {
   }
 
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 327998923f..337a358c3e 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -39,11 +39,16 @@ body {
   margin: 0;
 }
 
+ds-header-navbar-wrapper {
+  z-index: none;
+}
+
 ds-admin-sidebar {
   position: fixed;
   z-index: $sidebar-z-index;
 }
 
+
 .ds-full-screen-loader {
   height: 100vh;
 }
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index abc66cad7c..c93944f929 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2464,7 +2464,7 @@
 
   "media-viewer.next": "Next",
 
-  "media-viewer.previus": "Previus",
+  "media-viewer.previous": "Previous",
 
   "media-viewer.playlist": "Playlist",
 
diff --git a/src/config/global-config.interface.ts b/src/config/global-config.interface.ts
index 07ee4ca444..fc9e6fe029 100644
--- a/src/config/global-config.interface.ts
+++ b/src/config/global-config.interface.ts
@@ -5,12 +5,13 @@ import { UniversalConfig } from './universal-config.interface';
 import { INotificationBoardOptions } from './notifications-config.interfaces';
 import { SubmissionConfig } from './submission-config.interface';
 import { FormConfig } from './form-config.interfaces';
-import {LangConfig} from './lang-config.interface';
+import { LangConfig } from './lang-config.interface';
 import { BrowseByConfig } from './browse-by-config.interface';
 import { ItemPageConfig } from './item-page-config.interface';
 import { CollectionPageConfig } from './collection-page-config.interface';
 import { Theme } from './theme.inferface';
-import {AuthConfig} from './auth-config.interfaces';
+import { AuthConfig } from './auth-config.interfaces';
+import { MediaViewerConfig } from './media-viewer-config.interface';
 
 export interface GlobalConfig extends Config {
   ui: ServerConfig;
@@ -32,4 +33,5 @@ export interface GlobalConfig extends Config {
   collection: CollectionPageConfig;
   theme: Theme;
   rewriteDownloadUrls: boolean;
+  mediaViewer: MediaViewerConfig;
 }
diff --git a/src/config/media-viewer-config.interface.ts b/src/config/media-viewer-config.interface.ts
new file mode 100644
index 0000000000..c2fcc47a3d
--- /dev/null
+++ b/src/config/media-viewer-config.interface.ts
@@ -0,0 +1,7 @@
+import { Config } from './config.interface';
+
+export interface MediaViewerConfig extends Config {
+  enable: boolean;
+  image: boolean;
+  video: boolean;
+}
diff --git a/src/environments/environment.common.ts b/src/environments/environment.common.ts
index 4f73339690..b25d4f5bdb 100644
--- a/src/environments/environment.common.ts
+++ b/src/environments/environment.common.ts
@@ -217,4 +217,9 @@ export const environment: GlobalConfig = {
   },
   // Whether the UI should rewrite file download URLs to match its domain. Only necessary to enable when running UI and REST API on separate domains
   rewriteDownloadUrls: false,
+  mediaViewer: {
+    enable: true,
+    image: true,
+    video: true,
+  },
 };