diff --git a/wowup-electron/angular.json b/wowup-electron/angular.json index db8518a8..1a4b3254 100644 --- a/wowup-electron/angular.json +++ b/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" diff --git a/wowup-electron/package-lock.json b/wowup-electron/package-lock.json index b3861c38..48efd8f0 100644 --- a/wowup-electron/package-lock.json +++ b/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", diff --git a/wowup-electron/package.json b/wowup-electron/package.json index 8d287137..67eb70a7 100644 --- a/wowup-electron/package.json +++ b/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", diff --git a/wowup-electron/src/app/app.module.ts b/wowup-electron/src/app/app.module.ts index dd31b403..2d4ab916 100644 --- a/wowup-electron/src/app/app.module.ts +++ b/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], }) diff --git a/wowup-electron/src/app/components/addon-detail/addon-detail.component.html b/wowup-electron/src/app/components/addon-detail/addon-detail.component.html index d39a7122..100dca55 100644 --- a/wowup-electron/src/app/components/addon-detail/addon-detail.component.html +++ b/wowup-electron/src/app/components/addon-detail/addon-detail.component.html @@ -63,11 +63,11 @@
- + - +
- +
diff --git a/wowup-electron/src/app/components/addon-detail/addon-detail.component.ts b/wowup-electron/src/app/components/addon-detail/addon-detail.component.ts index 61c59c4f..aa638030 100644 --- a/wowup-electron/src/app/components/addon-detail/addon-detail.component.ts +++ b/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 { diff --git a/wowup-electron/src/app/pages/home/home.component.ts b/wowup-electron/src/app/pages/home/home.component.ts index dfdd0a81..6dfbe498 100644 --- a/wowup-electron/src/app/pages/home/home.component.ts +++ b/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; }); diff --git a/wowup-electron/src/app/pages/home/home.module.ts b/wowup-electron/src/app/pages/home/home.module.ts index 1aa9ffa6..1c9bd686 100644 --- a/wowup-electron/src/app/pages/home/home.module.ts +++ b/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: [