#885 change preview if user is authernticated

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

@@ -1,7 +1,11 @@
-<ng-container>
+<div
+  [ngClass]="{
+    'change-gallery': (isAuthenticated$ | async)
+  }"
+>
   <ngx-gallery
     class="ngx-gallery"
     [options]="galleryOptions"
     [images]="galleryImages"
   ></ngx-gallery>
-</ng-container>
+</div>

src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss

@@ -1 +1,4 @@
-.ngx-gallery { display: inline-block; margin-bottom: 20px; }
+.ngx-gallery {
+  display: inline-block;
+  margin-bottom: 20px;
+}

src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts

@@ -2,6 +2,9 @@ import { Component, Input, 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';
+import { Observable } from 'rxjs';
+import { AuthService } from '../../../core/auth/auth.service';
+
 /**
  * This componenet render an image gallery for the image viewer
  */
@@ -15,14 +18,23 @@ export class MediaViewerImageComponent implements OnInit {
   @Input() preview?: boolean;
   @Input() image?: string;
 
+  loggedin: boolean;
+
   galleryOptions: NgxGalleryOptions[];
   galleryImages: NgxGalleryImage[];
 
+  /**
+   * Whether or not the current user is authenticated
+   */
+  isAuthenticated$: Observable<boolean>;
+
+  constructor(private authService: AuthService) {}
+
   /**
    * Thi method sets up the gallery settings and data
    */
   ngOnInit(): void {
-    console.log(this.preview);
+    this.isAuthenticated$ = this.authService.isAuthenticated();
     this.galleryOptions = [
       {
         preview: this.preview !== undefined ? this.preview : true,

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

@@ -1,4 +1,3 @@
-<ng-container>
 <video
   #media
   [src]="medias[currentIndex].bitstream._links.content.href"
@@ -46,4 +45,3 @@
     </div>
   </div>
 </div>
-</ng-container>

src/app/app.component.scss

@@ -1,6 +1,6 @@
-@import '../styles/helpers/font_awesome_imports.scss';
-@import '../../node_modules/bootstrap/scss/bootstrap.scss';
-@import '../../node_modules/nouislider/distribute/nouislider.min';
+@import "../styles/helpers/font_awesome_imports.scss";
+@import "../../node_modules/bootstrap/scss/bootstrap.scss";
+@import "../../node_modules/nouislider/distribute/nouislider.min";
 
 html {
   position: relative;
@@ -48,7 +48,6 @@ ds-admin-sidebar {
   z-index: $sidebar-z-index;
 }
 
-
 .ds-full-screen-loader {
   height: 100vh;
 }
@@ -57,3 +56,11 @@ ds-admin-sidebar {
   z-index: 0;
 }
 
+.media-viewer
+  .change-gallery
+  .ngx-gallery
+  ngx-gallery-preview.ngx-gallery-active {
+  right: 0;
+  left: auto;
+  width: 96%;
+}