#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,49 +1,47 @@
-<ng-container>
-  <video
-    #media
-    [src]="medias[currentIndex].bitstream._links.content.href"
-    id="singleVideo"
-    [poster]="
-      medias[currentIndex].thumbnail ||
-      this.replacements[this.medias[this.currentIndex].format]
-    "
-    preload="auto"
-    controls
-  ></video>
-  <div class="buttons" *ngIf="medias?.length > 1">
-    <button
-      class="btn btn-primary previous"
-      [disabled]="currentIndex === 0"
-      (click)="prevMedia()"
-    >
-      {{ "media-viewer.previous" | translate }}
-    </button>
+<video
+  #media
+  [src]="medias[currentIndex].bitstream._links.content.href"
+  id="singleVideo"
+  [poster]="
+    medias[currentIndex].thumbnail ||
+    this.replacements[this.medias[this.currentIndex].format]
+  "
+  preload="auto"
+  controls
+></video>
+<div class="buttons" *ngIf="medias?.length > 1">
+  <button
+    class="btn btn-primary previous"
+    [disabled]="currentIndex === 0"
+    (click)="prevMedia()"
+  >
+    {{ "media-viewer.previous" | translate }}
+  </button>
 
+  <button
+    class="btn btn-primary next"
+    [disabled]="currentIndex === medias.length - 1"
+    (click)="nextMedia()"
+  >
+    {{ "media-viewer.next" | translate }}
+  </button>
+  <div ngbDropdown class="d-inline-block">
     <button
-      class="btn btn-primary next"
-      [disabled]="currentIndex === medias.length - 1"
-      (click)="nextMedia()"
+      class="btn btn-outline-primary playlist"
+      id="dropdownBasic1"
+      ngbDropdownToggle
     >
-      {{ "media-viewer.next" | translate }}
+      {{ "media-viewer.playlist" | translate }}
     </button>
-    <div ngbDropdown class="d-inline-block">
+    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
       <button
-        class="btn btn-outline-primary playlist"
-        id="dropdownBasic1"
-        ngbDropdownToggle
+        ngbDropdownItem
+        *ngFor="let item of medias; let i = index"
+        class="list-element"
+        (click)="selectedMedia(i)"
       >
-        {{ "media-viewer.playlist" | translate }}
+        {{ item.bitstream.name }}
       </button>
-      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-        <button
-          ngbDropdownItem
-          *ngFor="let item of medias; let i = index"
-          class="list-element"
-          (click)="selectedMedia(i)"
-        >
-          {{ item.bitstream.name }}
-        </button>
-      </div>
     </div>
   </div>
-</ng-container>
+</div>

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,12 +48,19 @@ ds-admin-sidebar {
   z-index: $sidebar-z-index;
 }
 
-
 .ds-full-screen-loader {
   height: 100vh;
 }
 
-.sticky-top{
+.sticky-top {
   z-index: 0;
 }
 
+.media-viewer
+  .change-gallery
+  .ngx-gallery
+  ngx-gallery-preview.ngx-gallery-active {
+  right: 0;
+  left: auto;
+  width: 96%;
+}