#885 add enviroment variable for media viewer

.editorconfig

@@ -12,3 +12,6 @@ trim_trailing_whitespace = true
 [*.md]
 insert_final_newline = false
 trim_trailing_whitespace = false
+
+[*.ts]
+quote_type = single

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,
       },
     ];
 

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()"
     >

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>

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>>) =>

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>

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) {
   }
 

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

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",
 

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

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;
+}

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,
+  },
 };