Commits
Alexandre Vryghem authored aa4d56e2cf1
1 - | import { Component, Input, OnInit } from '@angular/core'; |
1 + | import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; |
2 2 | import { NgxGalleryImage, NgxGalleryOptions } from '@kolkov/ngx-gallery'; |
3 3 | import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model'; |
4 4 | import { NgxGalleryAnimation } from '@kolkov/ngx-gallery'; |
5 5 | import { Observable } from 'rxjs'; |
6 6 | import { AuthService } from '../../../core/auth/auth.service'; |
7 7 | |
8 8 | /** |
9 9 | * This componenet render an image gallery for the image viewer |
10 10 | */ |
11 11 | @Component({ |
12 12 | selector: 'ds-media-viewer-image', |
13 13 | templateUrl: './media-viewer-image.component.html', |
14 14 | styleUrls: ['./media-viewer-image.component.scss'], |
15 15 | }) |
16 - | export class MediaViewerImageComponent implements OnInit { |
16 + | export class MediaViewerImageComponent implements OnChanges, OnInit { |
17 17 | @Input() images: MediaViewerItem[]; |
18 18 | @Input() preview?: boolean; |
19 19 | @Input() image?: string; |
20 20 | |
21 21 | loggedin: boolean; |
22 22 | |
23 23 | galleryOptions: NgxGalleryOptions[]; |
24 24 | galleryImages: NgxGalleryImage[]; |
25 25 | |
26 26 | /** |
27 27 | * Whether or not the current user is authenticated |
28 28 | */ |
29 29 | isAuthenticated$: Observable<boolean>; |
30 30 | |
31 31 | constructor(private authService: AuthService) {} |
32 32 | |
33 - | /** |
34 - | * Thi method sets up the gallery settings and data |
35 - | */ |
36 - | ngOnInit(): void { |
37 - | this.isAuthenticated$ = this.authService.isAuthenticated(); |
33 + | ngOnChanges(changes: SimpleChanges): void { |
34 + | this.image = changes.image.currentValue; |
35 + | this.preview = changes.preview.currentValue; |
38 36 | this.galleryOptions = [ |
39 37 | { |
40 38 | preview: this.preview !== undefined ? this.preview : true, |
41 39 | image: true, |
42 40 | imageSize: 'contain', |
43 41 | thumbnails: false, |
44 42 | imageArrows: false, |
45 43 | startIndex: 0, |
46 44 | imageAnimation: NgxGalleryAnimation.Slide, |
47 45 | previewCloseOnEsc: true, |
48 46 | previewZoom: true, |
49 47 | previewRotate: true, |
50 48 | previewFullscreen: true, |
51 49 | }, |
52 50 | ]; |
53 - | |
54 51 | if (this.image) { |
55 52 | this.galleryImages = [ |
56 53 | { |
57 54 | small: this.image, |
58 55 | medium: this.image, |
59 56 | big: this.image, |
60 57 | }, |
61 58 | ]; |
62 59 | } else { |
63 60 | this.galleryImages = this.convertToGalleryImage(this.images); |
64 61 | } |
65 62 | } |
66 63 | |
64 + | ngOnInit(): void { |
65 + | this.isAuthenticated$ = this.authService.isAuthenticated(); |
66 + | } |
67 + | |
67 68 | /** |
68 69 | * This method convert an array of MediaViewerItem into NgxGalleryImage array |
69 70 | * @param medias input NgxGalleryImage array |
70 71 | */ |
71 72 | convertToGalleryImage(medias: MediaViewerItem[]): NgxGalleryImage[] { |
72 73 | const mappadImages = []; |
73 74 | for (const image of medias) { |
74 75 | if (image.format === 'image') { |
75 76 | mappadImages.push({ |
76 77 | small: image.thumbnail |