Use swiper instead of ng-gallery

package.json

@@ -31,8 +31,8 @@
     "angulartics2": "^10.0.0",
     "core-js": "^3.6.5",
     "material-design-icons": "^3.0.1",
-    "ng-gallery": "^5.0.0",
     "rxjs": "^6.6.3",
+    "swiper": "^7.0.7",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"
   },

src/app/app.module.ts

@@ -2,11 +2,10 @@ import { BrowserModule, Title } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
-import { DatePipe } from '@angular/common';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { LinuxStoreAngularMaterialModule } from './linux-store-angular-material/linux-store-angular-material.module';
-import { GalleryModule } from 'ng-gallery';
+import { SwiperModule } from 'swiper/angular';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -26,7 +25,7 @@ import { AppDetailsMainComponent } from './shared/app-details-main/app-details-m
 import { AppDetailsDescriptionComponent } from './shared/app-details-description/app-details-description.component';
 import {
   AppDetailsExtraInfoComponent,
-  AppDetailsExtraInfoLicenseModalComponent
+  AppDetailsExtraInfoLicenseModalComponent,
 } from './shared/app-details-extra-info/app-details-extra-info.component';
 import { AppDetailsReviewsComponent } from './shared/app-details-reviews/app-details-reviews.component';
 import { HomeComponent } from './pages/home/home.component';
@@ -43,7 +42,6 @@ import { BadgesComponent } from './pages/badges/badges.component';
 import { FeedsComponent } from './pages/feeds/feeds.component';
 import { NotFoundComponent } from './pages/not-found/not-found.component';
 
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -75,18 +73,18 @@ import { NotFoundComponent } from './pages/not-found/not-found.component';
     FormsModule,
     HttpClientModule,
     BrowserAnimationsModule,
-    GalleryModule,
+    SwiperModule,
     FlexLayoutModule,
     LinuxStoreAngularMaterialModule,
     AppRoutingModule,
-    Angulartics2Module.forRoot()
+    Angulartics2Module.forRoot(),
   ],
   providers: [
     Title,
     LinuxStoreApiService,
     AnalyticsService,
     SeoService
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/linux-store-api.service.ts

@@ -49,6 +49,17 @@ export class LinuxStoreApiService {
           this.appDetailsCache[request] = app;
           this.performingRequest[request] = false;
         }),
+        map((app) => {
+          // Get rid of faulty screenshots
+          const filteredScreenshots = app.screenshots.filter(
+            (screenshot) =>
+              !!screenshot.imgDesktopUrl ||
+              !!screenshot.imgMobileUrl ||
+              !!screenshot.thumbUrl
+          );
+          app.screenshots = filteredScreenshots;
+          return app;
+        }),
         catchError(this.handleError('getApp', null))
       );
     } else {

src/app/shared/app-details-description/app-details-description.component.html

@@ -1,10 +1,65 @@
 <div>
-  <gallery *ngIf="items" class="gallery-mobile mat-elevation-z1" ngClass.gt-sm="gallery-desktop" [items]="items"
-    [counter]="false"
-    [thumb]="this.showThumbnails"
-    [thumbWidth]="90"
-    [thumbHeight]="70"></gallery>
-  <div *ngIf="app" class="app-details-description" [innerHTML]="app.description"></div>
-  <h3 *ngIf="this.showCurrentReleaseInfo">Changes in version {{app.currentReleaseVersion}}</h3>
-  <div *ngIf="this.showCurrentReleaseInfo" class="app-details-description" [innerHTML]="app.currentReleaseDescription"></div>
+  <div class="gallery">
+    <swiper
+      [slidesPerView]="1"
+      [spaceBetween]="50"
+      [navigation]="moreThenOneImage"
+      [loop]="true"
+      [a11y]="true"
+      [autoplay]="moreThenOneImage"
+      [thumbs]="{ swiper: thumbsSwiper }"
+    >
+      <ng-template *ngFor="let item of app.screenshots" swiperSlide>
+        <img
+          [src]="isHandset ? item.imgMobileUrl : item.imgDesktopUrl"
+          [ngStyle]="{
+            'max-width': '100%',
+            display: 'block',
+            'margin-left': 'auto',
+            'margin-right': 'auto'
+          }"
+        />
+      </ng-template>
+    </swiper>
+
+    <swiper
+      *ngIf="showThumbnails"
+      [slidesPerView]="'auto'"
+      [spaceBetween]="5"
+      (swiper)="setThumbsSwiper($event)"
+      [navigation]="{}"
+      [pagination]="{ clickable: true }"
+      [scrollbar]="{ draggable: true }"
+      [watchSlidesProgress]="true"
+      class="thumbs"
+    >
+      <ng-template *ngFor="let item of app.screenshots" swiperSlide>
+        <div
+          [ngStyle]="{
+            'background-image': 'url(' + item.thumbUrl + ')',
+            width: '100%',
+            height: '100%',
+            'background-position': '50%',
+            'background-size': 'cover',
+            'background-repeat': 'no-repeat',
+            cursor: 'pointer'
+          }"
+        ></div>
+      </ng-template>
+    </swiper>
+  </div>
+
+  <div
+    *ngIf="app"
+    class="app-details-description"
+    [innerHTML]="app.description"
+  ></div>
+  <h3 *ngIf="this.showCurrentReleaseInfo">
+    Changes in version {{ app.currentReleaseVersion }}
+  </h3>
+  <div
+    *ngIf="this.showCurrentReleaseInfo"
+    class="app-details-description"
+    [innerHTML]="app.currentReleaseDescription"
+  ></div>
 </div>

src/app/shared/app-details-description/app-details-description.component.scss

@@ -1,20 +1,5 @@
-gallery {
-  margin: 2vh 0;
-  background: transparent;
-  padding-top: 0;
-
-  ::ng-deep image-item div {
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-}
-
-.gallery-mobile{
-  max-height: 200px;
-}
-
-.gallery-desktop{
-  min-height: 450px;
+.gallery {
+  margin-bottom: 2vh;
 }
 
 .app-details-description {

src/app/shared/app-details-description/app-details-description.component.ts

@@ -1,8 +1,16 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { ImageItem, GalleryItem } from 'ng-gallery';
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 
 import { App } from '../../shared/app.model';
+import SwiperCore, {
+  A11y,
+  Autoplay,
+  Navigation,
+  Scrollbar,
+  Thumbs,
+} from 'swiper';
+
+SwiperCore.use([Navigation, Thumbs, Autoplay, Scrollbar, A11y]);
 
 @Component({
   selector: 'store-app-details-description',
@@ -11,21 +19,29 @@ import { App } from '../../shared/app.model';
 })
 export class AppDetailsDescriptionComponent implements OnInit {
   @Input() app: App;
-  items: GalleryItem[];
   showCurrentReleaseInfo = false;
   showThumbnails = true;
+  moreThenOneImage = true;
   isHandset = false;
 
+  thumbsSwiper: SwiperCore;
+  setThumbsSwiper(swiper: SwiperCore) {
+    this.thumbsSwiper = swiper;
+  }
+
   constructor(breakpointObserver: BreakpointObserver) {
     breakpointObserver
       .observe([Breakpoints.HandsetLandscape, Breakpoints.HandsetPortrait])
       .subscribe((result) => {
-        if (result.matches) {
-          this.isHandset = true;
-        }
+        this.isHandset = result.matches;
+        this.setShowThumbnails();
       });
   }
 
+  private setShowThumbnails() {
+    this.showThumbnails = this.moreThenOneImage && !this.isHandset;
+  }
+
   ngOnInit() {
     if (this.app) {
       if (
@@ -37,14 +53,9 @@ export class AppDetailsDescriptionComponent implements OnInit {
         this.showCurrentReleaseInfo = true;
       }
 
-      if (this.app.screenshots && this.app.screenshots.length > 0) {
-        this.items = this.app.screenshots.map(
-          (item) =>
-            new ImageItem({ src: item.imgDesktopUrl, thumb: item.thumbUrl })
-        );
-        this.showThumbnails =
-          this.items && this.items.length > 1 && !this.isHandset;
-      }
+      this.moreThenOneImage =
+        this.app.screenshots && this.app.screenshots.length > 1;
+      this.setShowThumbnails();
     }
   }
 }

src/styles.scss

@@ -1,5 +1,6 @@
 /* Self hosted material design fonts */
-@import '~material-design-icons/iconfont/material-icons.css';
+@import "~material-design-icons/iconfont/material-icons.css";
+@import "swiper/css/bundle";
 
 .app {
   height: 100vh; // emmet h100vh
@@ -129,8 +130,8 @@ http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoint
   padding-right: 5%;
 }
 
-  /* desktop-medium */
-  @media all and (min-width: 841px) and (max-width: 1280px) {
+/* desktop-medium */
+@media all and (min-width: 841px) and (max-width: 1280px) {
   .store-content-container-narrow {
     padding-left: 20%;
     padding-right: 20%;
@@ -165,3 +166,13 @@ http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoint
     padding-right: 32%;
   }
 }
+
+.thumbs .swiper-slide {
+  height: 70px;
+  width: 90px;
+  opacity: 0.4;
+}
+
+.thumbs .swiper-slide-thumb-active {
+  opacity: 1;
+}