#885 change preview if user is authernticated

This commit is contained in:
Dániel Péter Sipos
2020-11-06 13:13:45 +01:00
parent af79945fd8
commit 115a59148f
5 changed files with 73 additions and 49 deletions

View File

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

View File

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

View File

@@ -2,6 +2,9 @@ import { Component, Input, OnInit } from '@angular/core';
import { NgxGalleryImage, NgxGalleryOptions } from '@kolkov/ngx-gallery'; import { NgxGalleryImage, NgxGalleryOptions } from '@kolkov/ngx-gallery';
import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model'; import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
import { NgxGalleryAnimation } from '@kolkov/ngx-gallery'; 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 * This componenet render an image gallery for the image viewer
*/ */
@@ -15,14 +18,23 @@ export class MediaViewerImageComponent implements OnInit {
@Input() preview?: boolean; @Input() preview?: boolean;
@Input() image?: string; @Input() image?: string;
loggedin: boolean;
galleryOptions: NgxGalleryOptions[]; galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[]; 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 * Thi method sets up the gallery settings and data
*/ */
ngOnInit(): void { ngOnInit(): void {
console.log(this.preview); this.isAuthenticated$ = this.authService.isAuthenticated();
this.galleryOptions = [ this.galleryOptions = [
{ {
preview: this.preview !== undefined ? this.preview : true, preview: this.preview !== undefined ? this.preview : true,

View File

@@ -1,5 +1,4 @@
<ng-container> <video
<video
#media #media
[src]="medias[currentIndex].bitstream._links.content.href" [src]="medias[currentIndex].bitstream._links.content.href"
id="singleVideo" id="singleVideo"
@@ -9,8 +8,8 @@
" "
preload="auto" preload="auto"
controls controls
></video> ></video>
<div class="buttons" *ngIf="medias?.length > 1"> <div class="buttons" *ngIf="medias?.length > 1">
<button <button
class="btn btn-primary previous" class="btn btn-primary previous"
[disabled]="currentIndex === 0" [disabled]="currentIndex === 0"
@@ -45,5 +44,4 @@
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</ng-container>

View File

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