added pictures gallery

frontend/package.json

@@ -29,6 +29,8 @@
     "@covalent/markdown": "^2.0.1",
     "@covalent/text-editor": "^2.0.0",
     "@fortawesome/fontawesome-free": "~5.6.3",
+    "@ngx-gallery/core": "^4.0.3",
+    "@ngx-gallery/lightbox": "^4.0.3",
     "@ngxs/form-plugin": "^3.4.3",
     "@ngxs/logger-plugin": "^3.4.3",
     "@ngxs/router-plugin": "^3.4.3",

frontend/src/app/app.component.ts

@@ -2,14 +2,18 @@ import { Component,  } from '@angular/core';
 import { Store } from '@ngxs/store';
 
 import { CommonState } from './common/common.state';
+import { delay } from 'rxjs/operators';
 
 @Component({
     selector:    'app-root',
     templateUrl: './app.component.html',
     styleUrls:  ['./app.component.scss']
 })
 export class AppComponent {
-    isAwaitingResponses$ = this.store.select(CommonState.isAwaitingResponses);
+    // FIXME: using delay(0) workaround because of `ExpressionChangedAfterItHasBeenCheckedError`
+    // This error arises in `<media-pictures>` gallery component.
+    isAwaitingResponses$ = this.store
+        .select(CommonState.isAwaitingResponses).pipe(delay(0));
 
     constructor(private readonly store: Store) {}
 }

frontend/src/app/auth/auth-token.interceptor.ts

@@ -24,9 +24,7 @@ export class AuthTokenInterceptor implements HttpInterceptor {
         return next.handle(token != null
             ? req.clone({ headers: req.headers.set('Authorization', `Bearer ${token}`) })
             : req
-        ).pipe(finalize(
-            () => this.store.dispatch(new AwaitResponse(false))
-        ));
+        ).pipe(finalize(() => this.store.dispatch(new AwaitResponse(false))));
     }
 
 

frontend/src/app/common/common.gallery.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { GalleryModule, GALLERY_CONFIG, GalleryConfig } from '@ngx-gallery/core';
+import { LightboxModule, LightboxConfig, LIGHTBOX_CONFIG } from '@ngx-gallery/lightbox';
+
+const galleryConfig: GalleryConfig = {
+    // determinate mode is currently broken  
+    // see https://github.com/MurhafSousli/ngx-gallery/issues/269
+    loadingMode: 'indeterminate' 
+};
+const lightboxConfig: LightboxConfig = {    
+    keyboardShortcuts: true
+};
+
+@NgModule({
+    exports: [ 
+        BrowserAnimationsModule,
+        GalleryModule,
+        LightboxModule
+    ],
+    providers: [
+        { provide: GALLERY_CONFIG,  useValue: galleryConfig  },
+        { provide: LIGHTBOX_CONFIG, useValue: lightboxConfig }
+    ]
+})
+export class CommonGalleryModule {}

frontend/src/app/common/common.module.ts

@@ -1,21 +1,25 @@
-import { NgModule         } from '@angular/core';
-import { BrowserModule    } from '@angular/platform-browser';
-import { UcWidgetModule   } from 'ngx-uploadcare-widget';
-import { ClipboardModule  } from 'ngx-clipboard';
+import { NgModule                } from '@angular/core';
+import { BrowserModule           } from '@angular/platform-browser';
+import { UcWidgetModule          } from 'ngx-uploadcare-widget';
+import { ClipboardModule         } from 'ngx-clipboard';
 
 import { VeeModule     } from '@utils/vee/vee.module';
 import { GraphQLModule } from '@app/gql/gql.module';
 
 import { CommonNgxsModule     } from './common-ngxs.module';
 import { CommonMaterialModule } from './common-material.module';
 import { CommonCovalentModule } from './common-covalent.module';
+import { CommonGalleryModule  } from './common.gallery.module';
 
 import { UploadImageComponent } from './image/upload-image/upload-image.component';
 import { SnackBarComponent    } from './snack-bar/snack-bar.component';
 import { PaginationModule     } from './pagination/pagination.module';
 import { RatingComponent      } from './rating/rating.component';
 
+
+
 const reexports = [
+    CommonGalleryModule,
     VeeModule,
     BrowserModule, 
     GraphQLModule,

frontend/src/app/common/rating/rating.component.ts

@@ -35,9 +35,10 @@ export class RatingComponent {
     onRatingBtnClicked(isLikeBtn: boolean) {
         const { myRating } = this.rateful;
 
-        // if no intial rating was set or client swapped like to dislike or vice versa
+        // if no initial rating was set or client swapped like to dislike or vice versa
         // otherwise, remove his [dis]like
-
+
+        debugger; // FIXME: rating counts doesn't get updated under some conditions
         const newRating = myRating == null || myRating.hasLiked !== isLikeBtn
             ? { hasLiked: isLikeBtn }
             : null;

frontend/src/app/media/media-pictures/media-pictures.component.html

@@ -1,9 +1,10 @@
-<app-media-pictures> is under development
-
-<!-- <ui-carousel [infinite]="true">
-    <ui-carousel-item *ngFor="let imageSrc of screenshotSrcs">
-        <figure class="local-carousel-item">
-            <img [src]="imageSrc" class="local-carousel-item__payload" >
-        </figure>
-    </ui-carousel-item>
-</ui-carousel> -->
+<div class="local-root">
+    <button *ngFor="let image of images; index as i" 
+        mat-button
+        (click)="openLightbox(i)"
+        type="button"
+        class="local-picture"
+    >
+        <img [src]="image.data.src" class="local-picture__img"/>
+    </button>
+</div>

frontend/src/app/media/media-pictures/media-pictures.component.scss

@@ -1,12 +1,16 @@
-.local-carousel-item {
-    object-fit: contain;
-    width: 100%;
-    height: 100%;
-
-    &__payload {
-        object-fit: contain;
+.local {
+    &-root {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
+        gap: 30px;
+    }
+    &-picture {
+        padding: 0;
         overflow: hidden;
-        display: block;
-        width: 100%;
+        border-radius: 8px;
+        &__img {
+            width: 100%;
+        }
     }
+
 }

frontend/src/app/media/media-pictures/media-pictures.component.ts

@@ -1,11 +1,54 @@
 import _ from 'lodash';
 import { Component } from '@angular/core';
+import { Gallery, ImageItem, GalleryRef } from '@ngx-gallery/core';
+import { Lightbox } from '@ngx-gallery/lightbox';
+import { take } from 'rxjs/operators';
 
 @Component({
     selector:    'app-media-pictures',
     templateUrl: './media-pictures.component.html',
     styleUrls:  ['./media-pictures.component.scss']
 })
 export class MediaPicturesComponent {
-    readonly screenshotSrcs = _.times(6, i => `/assets/game-screenshot${i + 1}.jpg`);
+    readonly galleryRef: GalleryRef;
+    readonly galleryId = 'MediaPictures';
+    // 6 screenshots from '/assets/' dir, update this counter when amount of 
+    // pictures that need to be display in this gallery changes
+    readonly images = _.times(6, i => { 
+        const imgUrl = `/assets/game-screenshot${i + 1}.jpg`;
+        return new ImageItem({ src: imgUrl, thumb: imgUrl });
+    });
+
+    constructor(
+        private readonly lightboxes: Lightbox, 
+        galleries: Gallery
+    ) {
+        this.galleryRef = galleries.ref(this.galleryId);
+        this.galleryRef.setConfig({ 
+            loadingStrategy: 'preload', // TODO: change to 'lazy' when gallery gets big
+            thumbPosition:   'left'
+        });
+        this.galleryRef.load(this.images);
+    }
+
+    onWheel = _.throttle(
+        (e: WheelEvent) => {
+            if      (e.deltaY > 0) this.galleryRef.next();
+            else if (e.deltaY < 0) this.galleryRef.prev();
+        },
+        /* throttle time */ 400,
+        { leading: true }
+    );
+
+    async openLightbox(index: number) {
+        this.lightboxes.open(index, this.galleryId, {
+            panelClass: 'fullscreen'
+        });
+
+        document.addEventListener('wheel', this.onWheel);
+
+        await this.lightboxes.closed.pipe(take(1)).toPromise();
+
+        document.removeEventListener('wheel', this.onWheel);
+    }
 }

frontend/src/app/media/media.component.html

@@ -1,4 +1,4 @@
-<mat-tab-group>
+<mat-tab-group dynamicHeight>
     <mat-tab>
         <ng-template mat-tab-label>
             <mat-icon class="media-tab-icon">photo</mat-icon>Pictures

frontend/src/app/news/news-details/news-details.component.ts

@@ -18,11 +18,10 @@ import { NewsService } from '../news.service';
 })
 export class NewsDetailsComponent implements OnInit, OnDestroy {
     news!: EntireNews;
-    newsRatingUpdater: RatingUpdater = newRating => {
-        return newRating == null 
-            ? this.newsService.deleteNewsRating(this.news.id)
-            : this.newsService.rateNews(this.news.id, newRating.hasLiked)
-    }
+    newsRatingUpdater: RatingUpdater = newRating => newRating == null 
+        ? this.newsService.deleteNewsRating(this.news.id)
+        : this.newsService.rateNews(this.news.id, newRating.hasLiked)
+
 
     constructor(
         private readonly route: ActivatedRoute,