Skip to content

Commit

Permalink
lazyLoading working but slow
Browse files Browse the repository at this point in the history
  • Loading branch information
@cbartondock
cbartondock committed Jun 13, 2024
1 parent 668bf00 commit f6db2ea
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 29 deletions.
45 changes: 26 additions & 19 deletions src/renderer/components/preview.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,6 @@ export class PreviewComponent implements OnDestroy {
excludePutBacks: {[exceptionKey: string]: boolean} = {};
exclusionCount: number = 0;

inViewDict: {[appId: string]: boolean} = {};

constructor(
private previewService: PreviewService,
private settingsService: SettingsService,
Expand Down Expand Up @@ -109,6 +107,10 @@ export class PreviewComponent implements OnDestroy {
return APP.lang.preview.component;
}

get inViewDict() {
return this.previewService.inViewDict;
}

get artworkTypes() {
return artworkTypes;
}
Expand All @@ -128,10 +130,15 @@ export class PreviewComponent implements OnDestroy {
return imageProviderNames
}


isArtworkType(artworkViewType: ArtworkViewType) {
return isArtworkType(artworkViewType)
}

clearInView() {
this.previewService.inViewDict = {};
}

closeAll() {
this.closeFilters()
this.closeRight();
Expand All @@ -144,6 +151,7 @@ export class PreviewComponent implements OnDestroy {
}

generatePreviewData() {
this.clearInView();
this.closeRight();
this.previewService.generatePreviewData();
}
Expand Down Expand Up @@ -228,6 +236,10 @@ export class PreviewComponent implements OnDestroy {
this.subscriptions.unsubscribe();
}

getActualArtworkType(artworkType?: ArtworkType): ArtworkType {
const currentViewType = this.previewService.getCurrentViewType();
return isArtworkType(currentViewType) ? currentViewType : artworkType;
}
getCurrentViewType() {
return this.previewService.getCurrentViewType();
}
Expand All @@ -244,8 +256,7 @@ export class PreviewComponent implements OnDestroy {
}

getAppImages(app: PreviewDataApp, artworkType?: ArtworkType) {
const currentViewType = this.previewService.getCurrentViewType();
const actualArtworkType: ArtworkType = isArtworkType(currentViewType) ? currentViewType : artworkType
const actualArtworkType = this.getActualArtworkType(artworkType);
return app.images[actualArtworkType];
}

Expand All @@ -261,15 +272,16 @@ export class PreviewComponent implements OnDestroy {
return posterUrl ? posterUrl : require('../../assets/images/no-images.svg');
}

onAppInView(inView: boolean, appElement: ElementRef, app: PreviewDataApp) {
/*onAppInView(inView: boolean, appElement: ElementRef, app: PreviewDataApp) {
this.inViewDict[app.extractedTitle]||=inView
}
}*/

setBackgroundImage(app: PreviewDataApp, image: ImageContent, artworkType?: ArtworkType, imageIndex?: number) {
if(!this.inViewDict[app.extractedTitle]) { return null; }
setBackgroundImage(appId: string, app: PreviewDataApp, image: ImageContent,
artworkType?: ArtworkType, imageIndex?: number, notLazy?: boolean) {
const currentViewType = this.previewService.getCurrentViewType();
const actualArtworkType: ArtworkType = this.getActualArtworkType(artworkType);
if(!notLazy && (!this.inViewDict[appId] || !this.inViewDict[appId][actualArtworkType])) { return null; }
if (image == undefined) {
const actualArtworkType: ArtworkType = isArtworkType(currentViewType) ? currentViewType : artworkType
let imagepool: string = app.images[actualArtworkType].imagePool;
if (this.previewService.getImages(actualArtworkType)[imagepool].online)
return require('../../assets/images/retrieving-images.svg');
Expand Down Expand Up @@ -304,8 +316,7 @@ export class PreviewComponent implements OnDestroy {
}

currentImageIndex(app: PreviewDataApp, artworkType?: ArtworkType) {
const currentViewType = this.previewService.getCurrentViewType();
const actualArtworkType: ArtworkType = isArtworkType(currentViewType) ? currentViewType : artworkType
const actualArtworkType = this.getActualArtworkType(artworkType);
return app.images[actualArtworkType].imageIndex + 1;
}

Expand All @@ -316,8 +327,7 @@ export class PreviewComponent implements OnDestroy {
addLocalImages(app: PreviewDataApp, artworkType?: ArtworkType) {
this.fileSelector.multiple = true;
this.fileSelector.accept = '.png, .jpeg, .jpg, .tga, .webp';
const currentViewType = this.previewService.getCurrentViewType();
const actualArtworkType: ArtworkType = isArtworkType(currentViewType) ? currentViewType : artworkType;
const actualArtworkType = this.getActualArtworkType(artworkType);
this.fileSelector.onChange = (target) => {
if (target.files) {
let extRegex = /png|tga|jpg|jpeg|webp/i;
Expand Down Expand Up @@ -696,20 +706,17 @@ export class PreviewComponent implements OnDestroy {
}

previousImage(app: PreviewDataApp, artworkType?: ArtworkType) {
const currentViewType = this.previewService.getCurrentViewType();
const actualArtworkType: ArtworkType = isArtworkType(currentViewType) ? currentViewType : artworkType;
const actualArtworkType = this.getActualArtworkType(artworkType);
this.previewService.setImageIndex(app, app.images[actualArtworkType].imageIndex - 1, actualArtworkType);
}

nextImage(app: PreviewDataApp, artworkType?: ArtworkType) {
const currentViewType = this.previewService.getCurrentViewType();
const actualArtworkType: ArtworkType = isArtworkType(currentViewType) ? currentViewType : artworkType;
const actualArtworkType = this.getActualArtworkType(artworkType);
this.previewService.setImageIndex(app, app.images[actualArtworkType].imageIndex + 1, actualArtworkType);
}

chooseImage(app: PreviewDataApp, imageIndex: number, artworkType?: ArtworkType) {
const currentViewType = this.previewService.getCurrentViewType();
const actualArtworkType: ArtworkType = isArtworkType(currentViewType) ? currentViewType : artworkType;
const actualArtworkType = this.getActualArtworkType(artworkType);
this.previewService.setImageIndex(app, imageIndex, actualArtworkType);

}
Expand Down
18 changes: 13 additions & 5 deletions src/renderer/directives/inview.directive.ts
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
import { Directive, ElementRef, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
import { debounce } from "lodash";
import { ArtworkType, initArtworkRecord } from '../../models';

@Directive({
selector: '[ng-inview]'
})
export class InViewDirective implements OnInit, OnDestroy {
@Input() parentSelector: string;
@Input() margin: number;
@Output() inView = new EventEmitter<{inView: boolean, target: ElementRef}>();
@Input() artworkType: ArtworkType;
@Input() inViewDict: {[appId: string]: Record<ArtworkType,boolean>}
@Input() appId: string;
//@Output() inView = new EventEmitter<{inView: boolean, target: ElementRef}>();

private parentElement: HTMLElement;
private parentRect: DOMRect;
constructor(private el: ElementRef) {}

ngOnInit() {
this.parentElement = this.getParentElement();
if (this.parentElement) {
if (this.parentElement && (!this.inViewDict[this.appId]||!this.inViewDict[this.appId][this.artworkType])) {
this.parentElement.addEventListener('scroll', this.onParentScroll);
this.parentRect = this.parentElement.getBoundingClientRect();

this.checkInView();
}
}
Expand All @@ -39,7 +42,7 @@ export class InViewDirective implements OnInit, OnDestroy {

private onParentScroll = debounce(() => {
this.checkInView();
}, 500);
}, 200);

private checkInView() {
const rect = this.el.nativeElement.getBoundingClientRect();
Expand All @@ -49,6 +52,11 @@ export class InViewDirective implements OnInit, OnDestroy {
//&& rect.left >= parentRect.left &&
//rect.right <= parentRect.right
);
this.inView.emit({inView: inView, target: this.el});
//this.inView.emit({inView: inView, target: this.el});
if(inView) {
if(!this.inViewDict[this.appId]) {this.inViewDict[this.appId]= initArtworkRecord<boolean>(()=>false)}
this.inViewDict[this.appId][this.artworkType] = true;
this.parentElement.removeEventListener('scroll', this.onParentScroll)
}
}
}
2 changes: 2 additions & 0 deletions src/renderer/services/preview.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,8 @@ export class PreviewService {
private batchProgress: BehaviorSubject<{update: string, batch: number}>;
private categoryManager: CategoryManager;
private sgdbToArt: SGDBToArt;
inViewDict: {[appId: string]: Record<ArtworkType, boolean>} = {};

constructor(private parsersService: ParsersService, private loggerService: LoggerService, private imageProviderService: ImageProviderService, private settingsService: SettingsService, private http: HttpClient) {
this.previewData = undefined;
this.previewVariables = {
Expand Down
12 changes: 7 additions & 5 deletions src/renderer/templates/preview.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ <h1>Add your games to Steam</h1>
<ng-container *ngFor="let imageIndex of (imageRanges[provider] | rangeArray)">
<ng-container *ngVar="getBackgroundImageList(currentApp.app, imageIndex, listImagesArtworkType) as image">
<div class="app"
[style.backgroundImage]="setBackgroundImage(currentApp.app, image, listImagesArtworkType, imageIndex) | cssUrl | safeStyle"
[style.backgroundImage]="setBackgroundImage(currentApp.appId, currentApp.app, image, listImagesArtworkType, imageIndex, true) | cssUrl | safeStyle"
[class.longStyle]="listImagesArtworkType === 'long'"
[class.tallStyle]="listImagesArtworkType === 'tall'"
[class.heroStyle]="listImagesArtworkType === 'hero'"
Expand Down Expand Up @@ -338,11 +338,12 @@ <h1>Add your games to Steam</h1>
<ng-container *ngFor="let artworkType of artworkTypes">
<ng-container *ngVar="getBackgroundImage(app, artworkType) as image">
<ng-container *ngVar="getAppImages(app, artworkType) as appimages">
<!-- ng-inview [parentSelector]="'.entries'" [margin]="400" (inView)="onAppInView($event.inView, $event.target, app)" -->
<div
ng-inview [parentSelector]="'.entries'" [margin]="400" [appId]="appId" [inViewDict]="inViewDict" [artworkType]="artworkType"
class="app"
*ngIf="isAppVisible(app)"
ng-inview [parentSelector]="'.entries'" [margin]="400" (inView)="onAppInView($event.inView, $event.target, app)"
[style.backgroundImage]="setBackgroundImage(app, image, artworkType) | cssUrl | safeStyle"
[style.backgroundImage]="setBackgroundImage(appId, app, image, artworkType) | cssUrl | safeStyle"
[class.retrieving]="getImagePool(appimages.imagePool, artworkType).retrieving"
[class.noImages]="
!getImagePool(appimages.imagePool, artworkType).retrieving && image == undefined
Expand Down Expand Up @@ -544,9 +545,10 @@ <h1>Add your games to Steam</h1>
<ng-container *ngIf="isArtworkType(getCurrentViewType())">
<ng-container *ngVar="getBackgroundImage(app) as image">
<ng-container *ngVar="getAppImages(app) as appimages">
<!-- ng-inview [parentSelector]="'.entries'" [margin]="400" (inView)="onAppInView($event.inView, $event.target, app)" -->
<div
ng-inview [parentSelector]="'.entries'" [margin]="400" (inView)="onAppInView($event.inView, $event.target, app)"
[style.backgroundImage]="setBackgroundImage(app, image) | cssUrl | safeStyle"
ng-inview [parentSelector]="'.entries'" [margin]="400" [appId]="appId" [inViewDict]="inViewDict" [artworkType]="getActualArtworkType()"
[style.backgroundImage]="setBackgroundImage(appId, app, image) | cssUrl | safeStyle"
class="app"
*ngIf="isAppVisible(app)"
[class.retrieving]="getImagePool(appimages.imagePool).retrieving"
Expand Down

0 comments on commit f6db2ea

Please sign in to comment.