Use different lightbox library

wowup-electron/angular.json

@@ -17,7 +17,7 @@
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
             "assets": ["src/assets"],
-            "styles": ["./node_modules/ngx-lightbox/lightbox.css", "src/styles.scss"],
+            "styles": ["src/styles.scss"],
             "scripts": [],
             "customWebpackConfig": {
               "path": "./angular.webpack.js"

wowup-electron/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "wowup",
-  "version": "2.4.2",
+  "version": "2.5.0-beta.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -14714,10 +14714,13 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
-    "ngx-lightbox": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/ngx-lightbox/-/ngx-lightbox-2.4.1.tgz",
-      "integrity": "sha512-5r+PA+6Ep3PPAx22SDC6HSX/qHrVLade67hkEnJG2ZId9MkarPyFaUq5bIvS6+dXsEyckF0d+yH1fI8D6YWAvQ=="
+    "ng-gallery": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ng-gallery/-/ng-gallery-5.0.0.tgz",
+      "integrity": "sha512-RFnMLJss8XbR7mmaKW39adPe78uzPp+ttv0l1hraq6IRcebTK7Ltzp8dVVg+fzdbx+cTmadespR6nD/icgrckg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
     },
     "ngx-translate-messageformat-compiler": {
       "version": "4.10.0",

wowup-electron/package.json

@@ -145,7 +145,7 @@
     "markdown-it": "12.1.0",
     "messageformat": "2.3.0",
     "minimist": "1.2.5",
-    "ngx-lightbox": "2.4.1",
+    "ng-gallery": "5.0.0",
     "ngx-translate-messageformat-compiler": "4.10.0",
     "node-cache": "5.1.2",
     "node-disk-info": "1.3.0",

wowup-electron/src/app/app.module.ts

@@ -10,6 +10,8 @@ import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { TranslateCompiler, TranslateLoader, TranslateModule } from "@ngx-translate/core";
 import { TranslateHttpLoader } from "@ngx-translate/http-loader";
+import { GalleryModule } from "ng-gallery";
+import { LightboxModule, LIGHTBOX_CONFIG } from "ng-gallery/lightbox";
 
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
@@ -64,6 +66,8 @@ export function initializeApp(wowupService: WowUpService) {
       },
     }),
     BrowserAnimationsModule,
+    GalleryModule,
+    LightboxModule,
   ],
   providers: [
     {
@@ -82,6 +86,12 @@ export function initializeApp(wowupService: WowUpService) {
       useClass: ErrorHandlerInterceptor,
       deps: [AnalyticsService],
     },
+    {
+      provide: LIGHTBOX_CONFIG,
+      useValue: {
+        keyboardShortcuts: true,
+      },
+    },
   ],
   bootstrap: [AppComponent],
 })

wowup-electron/src/app/components/addon-detail/addon-detail.component.html

@@ -63,11 +63,11 @@
       <div #changelogContainer class="markdown-body addon-changelog text-1 mt-3" [innerHTML]="changelog$ | async"></div>
     </mat-tab>
     <!-- SCREENSHOTS -->
-    <mat-tab *ngIf="imageUrls.length > 0" [label]="'DIALOGS.ADDON_DETAILS.IMAGES_TAB' | translate">
+    <mat-tab *ngIf="previewItems.length > 0" [label]="'DIALOGS.ADDON_DETAILS.IMAGES_TAB' | translate">
       <mat-grid-list class="image-grid pt-3" cols="4" rowHeight="1:1" gutterSize="3">
-        <mat-grid-tile *ngFor="let image of imageUrls">
+        <mat-grid-tile *ngFor="let image of previewItems; index as i">
           <div class="image-thumb-container ">
-            <img class="image-thumb mat-elevation-z8" [src]="image.src" (click)="onClickImage(image.src)">
+            <img class="image-thumb mat-elevation-z8" [src]="image.data.thumb" [lightbox]="i">
           </div>
         </mat-grid-tile>
       </mat-grid-list>

wowup-electron/src/app/components/addon-detail/addon-detail.component.ts

@@ -1,7 +1,6 @@
 import { last } from "lodash";
 import { BehaviorSubject, from, of, Subscription } from "rxjs";
 import { filter, first, map, switchMap, tap } from "rxjs/operators";
-import { IAlbum, Lightbox } from "ngx-lightbox";
 
 import {
   AfterViewChecked,
@@ -33,6 +32,7 @@ import * as SearchResult from "../../utils/search-result.utils";
 import { ConfirmDialogComponent } from "../confirm-dialog/confirm-dialog.component";
 import { formatDynamicLinks } from "../../utils/dom.utils";
 import { LinkService } from "../../services/links/link.service";
+import { Gallery, GalleryItem, ImageItem } from "ng-gallery";
 
 export interface AddonDetailModel {
   listItem?: AddonViewModel;
@@ -85,7 +85,7 @@ export class AddonDetailComponent implements OnInit, OnDestroy, AfterViewChecked
   public isUnknownProvider = false;
   public isMissingUnknownDependencies = false;
   public missingDependencies: string[] = [];
-  public imageUrls: IAlbum[] = [];
+  public previewItems: GalleryItem[] = [];
 
   public constructor(
     @Inject(MAT_DIALOG_DATA) public model: AddonDetailModel,
@@ -96,8 +96,8 @@ export class AddonDetailComponent implements OnInit, OnDestroy, AfterViewChecked
     private _snackbarService: SnackbarService,
     private _translateService: TranslateService,
     private _sessionService: SessionService,
-    private _lightbox: Lightbox,
-    private _linkService: LinkService
+    private _linkService: LinkService,
+    public gallery: Gallery
   ) {
     this._dependencies = this.getDependencies();
 
@@ -169,12 +169,12 @@ export class AddonDetailComponent implements OnInit, OnDestroy, AfterViewChecked
     this.isMissingUnknownDependencies = !!this.missingDependencies.length;
 
     const imageUrlList = this.model.listItem?.addon?.screenshotUrls ?? this.model.searchResult?.screenshotUrls ?? [];
-    this.imageUrls = imageUrlList.map((url) => {
-      return {
-        src: url,
-        thumb: url,
-      };
+
+    this.previewItems = imageUrlList.map((url) => {
+      return new ImageItem({ src: url, thumb: url });
     });
+
+    this.gallery.ref().load(this.previewItems);
   }
 
   public ngAfterViewInit(): void {}
@@ -191,12 +191,7 @@ export class AddonDetailComponent implements OnInit, OnDestroy, AfterViewChecked
   }
 
   public onClickImage(url: string): void {
-    const idx = this.imageUrls.findIndex((album) => album.src === url);
-    if (idx >= 0) {
-      this._lightbox.open(this.imageUrls, idx, {
-        centerVertically: true,
-      });
-    }
+    
   }
 
   public onInstallUpdated(): void {

wowup-electron/src/app/pages/home/home.component.ts

@@ -31,7 +31,6 @@ import { SnackbarService } from "../../services/snackbar/snackbar.service";
 import { WarcraftInstallationService } from "../../services/warcraft/warcraft-installation.service";
 import { WowUpService } from "../../services/wowup/wowup.service";
 import { getProtocol } from "../../utils/string.utils";
-import { LightboxConfig } from "ngx-lightbox";
 
 @Component({
   selector: "app-home",
@@ -63,12 +62,8 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
     private _snackBarService: SnackbarService,
     private _cdRef: ChangeDetectorRef,
     private _warcraftInstallationService: WarcraftInstallationService,
-    private _dialogFactory: DialogFactory,
-    private _lightboxConfig: LightboxConfig
+    private _dialogFactory: DialogFactory
   ) {
-    _lightboxConfig.fadeDuration = 0.3;
-    _lightboxConfig.resizeDuration = 0.3;
-
     const wowInstalledSub = this._warcraftInstallationService.wowInstallations$.subscribe((installations) => {
       this.hasWowClient = installations.length > 0;
     });

wowup-electron/src/app/pages/home/home.module.ts

@@ -1,5 +1,4 @@
 import { AgGridModule } from "ag-grid-angular";
-import { LightboxModule } from "ngx-lightbox";
 
 import { CommonModule, DatePipe } from "@angular/common";
 import { NgModule } from "@angular/core";
@@ -48,6 +47,7 @@ import { MyAddonsComponent } from "../my-addons/my-addons.component";
 import { OptionsComponent } from "../options/options.component";
 import { HomeRoutingModule } from "./home-routing.module";
 import { HomeComponent } from "./home.component";
+import { LightboxModule, LIGHTBOX_CONFIG } from "ng-gallery/lightbox";
 
 @NgModule({
   declarations: [