Skip to content

Commit

Permalink
Refactoring gallery to use observable for soring #287
Browse files Browse the repository at this point in the history
  • Loading branch information
@bpatrik
bpatrik committed Feb 11, 2022
1 parent fc385d9 commit 169d59f
Show file tree
Hide file tree
Showing 8 changed files with 315 additions and 261 deletions.
4 changes: 4 additions & 0 deletions src/frontend/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,8 @@ import {BlogService} from './ui/gallery/blog/blog.service';
import {PhotoFilterPipe} from './pipes/PhotoFilterPipe';
import {PreviewSettingsComponent} from './ui/settings/preview/preview.settings.component';
import {GallerySearchFieldComponent} from './ui/gallery/search/search-field/search-field.gallery.component';
import {GalleryFilterComponent} from './ui/gallery/filter/filter.gallery.component';
import {GallerySortingService} from './ui/gallery/navigator/sorting.service';

@Injectable()
export class MyHammerConfig extends HammerGestureConfig {
Expand Down Expand Up @@ -213,6 +215,7 @@ Marker.prototype.options.icon = iconDefault;
GallerySearchQueryBuilderComponent,
GalleryShareComponent,
GalleryNavigatorComponent,
GalleryFilterComponent,
GalleryPhotoComponent,
AdminComponent,
InfoPanelLightboxComponent,
Expand Down Expand Up @@ -270,6 +273,7 @@ Marker.prototype.options.icon = iconDefault;
AlbumsService,
GalleryCacheService,
GalleryService,
GallerySortingService,
MapService,
BlogService,
SearchQueryParserService,
Expand Down
18 changes: 9 additions & 9 deletions src/frontend/app/ui/gallery/gallery.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,29 +41,29 @@
</div>

<!-- Its safe to hand over both as only one should have a value (search result or dir listing)-->
<app-gallery-navbar [searchResult]="ContentWrapper.searchResult"
[directory]="ContentWrapper.directory"></app-gallery-navbar>
<app-gallery-navbar></app-gallery-navbar>


<app-gallery-directories class="directories" [directories]="directories"></app-gallery-directories>
<app-gallery-directories class="directories"
[directories]="(directoryContent | async)?.directories || []"></app-gallery-directories>

<div class="blog-map-row">
<div class="blog-wrapper"
[style.width]="blogOpen ? '100%' : 'calc(100% - 100px)'"
*ngIf="config.Client.MetaFile.markdown && Content.metaFile && (Content.metaFile | mdFiles).length>0">
[style.width]="blogOpen ? '100%' : 'calc(100% - 100px)'"
*ngIf="config.Client.MetaFile.markdown && (directoryContent | async)?.metaFile && ((directoryContent | async).metaFile | mdFiles).length>0">
<app-gallery-blog [collapsed]="!blogOpen"
[mdFiles]="Content.metaFile | mdFiles"></app-gallery-blog>
[mdFiles]="(directoryContent | async).metaFile | mdFiles"></app-gallery-blog>


<button class="btn btn-blog-details" (click)="blogOpen=!blogOpen"><span
class="oi oi-chevron-{{blogOpen ? 'top' : 'bottom'}}"></span>
</button>
</div>
<app-gallery-map *ngIf="isPhotoWithLocation && mapEnabled"
[photos]="Content.media | photosOnly"
[gpxFiles]="Content.metaFile | gpxFiles"></app-gallery-map>
[photos]="(directoryContent | async).media | photosOnly"
[gpxFiles]="(directoryContent | async).metaFile | gpxFiles"></app-gallery-map>
</div>
<app-gallery-grid [media]="Content.media"
<app-gallery-grid [mediaObs]="mediaObs"
[lightbox]="lightbox"></app-gallery-grid>

</ng-container>
Expand Down
78 changes: 16 additions & 62 deletions src/frontend/app/ui/gallery/gallery.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {AuthenticationService} from '../../model/network/authentication.service';
import {ActivatedRoute, Params, Router} from '@angular/router';
import {ContentWrapperWithError, GalleryService} from './gallery.service';
import {ContentWrapperWithError, DirectoryContent, GalleryService} from './gallery.service';
import {GalleryGridComponent} from './grid/grid.gallery.component';
import {Config} from '../../../../common/config/public/Config';
import {ParentDirectoryDTO, SubDirectoryDTO} from '../../../../common/entities/DirectoryDTO';
Expand All @@ -12,11 +12,12 @@ import {UserRoles} from '../../../../common/entities/UserDTO';
import {interval, Observable, Subscription} from 'rxjs';
import {ContentWrapper} from '../../../../common/entities/ConentWrapper';
import {PageHelper} from '../../model/page.helper';
import {SortingMethods} from '../../../../common/entities/SortingMethods';
import {PhotoDTO} from '../../../../common/entities/PhotoDTO';
import {QueryParams} from '../../../../common/QueryParams';
import {SeededRandomService} from '../../model/seededRandom.service';
import {take} from 'rxjs/operators';
import {map, take} from 'rxjs/operators';
import {GallerySortingService} from './navigator/sorting.service';
import {Media} from './Media';
import {MediaDTO} from '../../../../common/entities/MediaDTO';

@Component({
selector: 'app-gallery',
Expand All @@ -37,30 +38,29 @@ export class GalleryComponent implements OnInit, OnDestroy {
public isPhotoWithLocation = false;
public countDown: { day: number, hour: number, minute: number, second: number } = null;
public readonly mapEnabled: boolean;
public readonly directoryContent: Observable<DirectoryContent>;
public readonly mediaObs: Observable<MediaDTO[]>;
private $counter: Observable<number>;
private subscription: { [key: string]: Subscription } = {
content: null,
route: null,
timer: null,
sorting: null
};
private collator = new Intl.Collator(undefined, {numeric: true});

constructor(public galleryService: GalleryService,
private authService: AuthenticationService,
private router: Router,
private shareService: ShareService,
private route: ActivatedRoute,
private navigation: NavigationService,
private rndService: SeededRandomService) {
private sortingService: GallerySortingService) {
this.mapEnabled = Config.Client.Map.enabled;
this.directoryContent = this.sortingService.applySorting(this.galleryService.directoryContent);
this.mediaObs = this.directoryContent.pipe(map(c => c?.media));
PageHelper.showScrollY();
}

get Content(): SearchResultDTO | ParentDirectoryDTO {
const cont = (this.ContentWrapper.searchResult || this.ContentWrapper.directory);
return cont ? cont : {} as any;
}

get ContentWrapper(): ContentWrapperWithError {
return this.galleryService.content.value;
Expand Down Expand Up @@ -119,11 +119,11 @@ export class GalleryComponent implements OnInit, OnDestroy {
this.$counter = interval(1000);
this.subscription.timer = this.$counter.subscribe((x): void => this.updateTimer(x));
}

this.subscription.sorting = this.galleryService.sorting.subscribe((): void => {
this.sortDirectories();
});

/*
this.subscription.sorting = this.galleryService.sorting.subscribe((): void => {
this.sortDirectories();
});
*/
}

private onRoute = async (params: Params): Promise<void> => {
Expand Down Expand Up @@ -155,7 +155,7 @@ export class GalleryComponent implements OnInit, OnDestroy {
media: []
}) as ParentDirectoryDTO | SearchResultDTO;
this.directories = tmp.directories;
this.sortDirectories();
// this.sortDirectories();
this.isPhotoWithLocation = false;

for (const media of tmp.media as PhotoDTO[]) {
Expand All @@ -169,50 +169,4 @@ export class GalleryComponent implements OnInit, OnDestroy {
}
}
};

private sortDirectories(): void {
if (!this.directories) {
return;
}
switch (this.galleryService.sorting.value) {
case SortingMethods.ascRating: // directories does not have rating
case SortingMethods.ascName:
this.directories.sort((a, b) => this.collator.compare(a.name, b.name));
break;
case SortingMethods.ascDate:
if (Config.Client.Other.enableDirectorySortingByDate === true) {
this.directories.sort((a, b) => a.lastModified - b.lastModified);
break;
}
this.directories.sort((a, b) => this.collator.compare(a.name, b.name));
break;
case SortingMethods.descRating: // directories does not have rating
case SortingMethods.descName:
this.directories.sort((a, b) => this.collator.compare(b.name, a.name));
break;
case SortingMethods.descDate:
if (Config.Client.Other.enableDirectorySortingByDate === true) {
this.directories.sort((a, b) => b.lastModified - a.lastModified);
break;
}
this.directories.sort((a, b) => this.collator.compare(b.name, a.name));
break;
case SortingMethods.random:
this.rndService.setSeed(this.directories.length);
this.directories.sort((a, b): number => {
if (a.name.toLowerCase() < b.name.toLowerCase()) {
return 1;
}
if (a.name.toLowerCase() > b.name.toLowerCase()) {
return -1;
}
return 0;
}).sort((): number => {
return this.rndService.get() - 0.5;
});
break;

}

}
}
51 changes: 15 additions & 36 deletions src/frontend/app/ui/gallery/gallery.service.ts
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
import {Injectable} from '@angular/core';
import {NetworkService} from '../../model/network/network.service';
import {ContentWrapper} from '../../../../common/entities/ConentWrapper';
import {DirectoryDTOUtils, ParentDirectoryDTO} from '../../../../common/entities/DirectoryDTO';
import {DirectoryDTOUtils, ParentDirectoryDTO, SubDirectoryDTO} from '../../../../common/entities/DirectoryDTO';
import {GalleryCacheService} from './cache.gallery.service';
import {BehaviorSubject} from 'rxjs';
import {BehaviorSubject, Observable} from 'rxjs';
import {Config} from '../../../../common/config/public/Config';
import {ShareService} from './share.service';
import {NavigationService} from '../../model/navigation.service';
import {SortingMethods} from '../../../../common/entities/SortingMethods';
import {QueryParams} from '../../../../common/QueryParams';
import {PG2ConfMap} from '../../../../common/PG2ConfMap';
import {SearchQueryDTO} from '../../../../common/entities/SearchQueryDTO';
import {ErrorCodes} from '../../../../common/entities/Error';
import {map} from 'rxjs/operators';
import {MediaDTO} from '../../../../common/entities/MediaDTO';
import {FileDTO} from '../../../../common/entities/FileDTO';


@Injectable()
export class GalleryService {

public content: BehaviorSubject<ContentWrapperWithError>;
public sorting: BehaviorSubject<SortingMethods>;
public directoryContent: Observable<DirectoryContent>;
lastRequest: { directory: string } = {
directory: null
};
Expand All @@ -31,42 +32,14 @@ export class GalleryService {
private shareService: ShareService,
private navigationService: NavigationService) {
this.content = new BehaviorSubject<ContentWrapperWithError>(new ContentWrapperWithError());
this.sorting = new BehaviorSubject<SortingMethods>(Config.Client.Other.defaultPhotoSortingMethod);
}

getDefaultSorting(directory: ParentDirectoryDTO): SortingMethods {
if (directory && directory.metaFile) {
for (const file in PG2ConfMap.sorting) {
if (directory.metaFile.some(f => f.name === file)) {
return (PG2ConfMap.sorting as any)[file];
}
}
}
return Config.Client.Other.defaultPhotoSortingMethod;
}

setSorting(sorting: SortingMethods): void {
this.sorting.next(sorting);
if (this.content.value.directory) {
if (sorting !== this.getDefaultSorting(this.content.value.directory)) {
this.galleryCacheService.setSorting(this.content.value.directory, sorting);
} else {
this.galleryCacheService.removeSorting(this.content.value.directory);
}
}
this.directoryContent = this.content.pipe(map(c =>
c.directory ? c.directory : c.searchResult
));
}


setContent(content: ContentWrapperWithError): void {
this.content.next(content);
if (content.directory) {
const sort = this.galleryCacheService.getSorting(content.directory);
if (sort !== null) {
this.sorting.next(sort);
} else {
this.sorting.next(this.getDefaultSorting(content.directory));
}
}
}


Expand Down Expand Up @@ -161,3 +134,9 @@ export class GalleryService {
export class ContentWrapperWithError extends ContentWrapper {
public error: string;
}

export interface DirectoryContent {
directories: SubDirectoryDTO[];
media: MediaDTO[];
metaFile: FileDTO[];
}
Loading

0 comments on commit 169d59f

Please sign in to comment.