Improving page title for easier understandable browser history #587

src/frontend/app/model/pi-title.service.ts

@@ -0,0 +1,51 @@
+import {Injectable} from '@angular/core';
+import {Config} from '../../../common/config/public/Config';
+import {Title} from '@angular/platform-browser';
+import {GridMedia} from '../ui/gallery/grid/GridMedia';
+import {SearchQueryParserService} from '../ui/gallery/search/search-query-parser.service';
+import {SearchQueryDTO} from '../../../common/entities/SearchQueryDTO';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PiTitleService {
+
+  private lastNonMedia: string = null;
+
+  constructor(
+    private titleService: Title,
+    private searchQueryParserService: SearchQueryParserService) {
+  }
+
+  setTitle(title: string) {
+    if (title) {
+      this.titleService.setTitle(Config.Server.applicationTitle + ' - ' + title);
+    } else {
+      this.titleService.setTitle(Config.Server.applicationTitle);
+    }
+  }
+
+  setSearchTitle(searchQuery: SearchQueryDTO | string) {
+    let query: SearchQueryDTO = searchQuery as SearchQueryDTO;
+    if (typeof searchQuery === 'string') {
+      query = JSON.parse(searchQuery);
+    }
+    this.lastNonMedia = this.searchQueryParserService.stringify(query);
+    this.setTitle(this.lastNonMedia);
+  }
+
+  setDirectoryTitle(path: string) {
+    this.lastNonMedia = path;
+    this.setTitle(this.lastNonMedia);
+  }
+
+  setMediaTitle(media: GridMedia) {
+    this.setTitle(media.getReadableRelativePath());
+  }
+
+  setLastNonMedia() {
+    if (this.lastNonMedia) {
+      this.setTitle(this.lastNonMedia);
+    }
+  }
+}

src/frontend/app/ui/admin/admin.component.ts

@@ -11,6 +11,7 @@ import {WebConfig} from '../../../../common/config/private/WebConfig';
 import {ISettingsComponent} from '../settings/template/ISettingsComponent';
 import {WebConfigClassBuilder} from '../../../../../node_modules/typeconfig/src/decorators/builders/WebConfigClassBuilder';
 import {enumToTranslatedArray} from '../EnumTranslations';
+import {PiTitleService} from '../../model/pi-title.service';
 
 @Component({
   selector: 'app-admin',
@@ -32,6 +33,7 @@ export class AdminComponent implements OnInit, AfterViewInit {
     public viewportScroller: ViewportScroller,
     public notificationService: NotificationService,
     public settingsService: SettingsService,
+    private piTitleService: PiTitleService
   ) {
     this.configPriorities = enumToTranslatedArray(ConfigPriority);
     const wc = WebConfigClassBuilder.attachPrivateInterface(new WebConfig());
@@ -51,6 +53,7 @@ export class AdminComponent implements OnInit, AfterViewInit {
       this.navigation.toLogin();
       return;
     }
+    this.piTitleService.setTitle($localize`Admin`);
   }
 
   public getCss(type: NotificationType): string {

src/frontend/app/ui/albums/albums.component.ts

@@ -1,19 +1,11 @@
-import {
+import {Component, ElementRef, OnInit, TemplateRef, ViewChild,} from '@angular/core';
-  Component,
-  ElementRef,
-  OnInit,
-  TemplateRef,
-  ViewChild,
-} from '@angular/core';
 import {AlbumsService} from './albums.service';
 import {BsModalService} from 'ngx-bootstrap/modal';
 import {BsModalRef} from 'ngx-bootstrap/modal/bs-modal-ref.service';
-import {
+import {SearchQueryTypes, TextSearch,} from '../../../../common/entities/SearchQueryDTO';
-  SearchQueryTypes,
-  TextSearch,
-} from '../../../../common/entities/SearchQueryDTO';
 import {UserRoles} from '../../../../common/entities/UserDTO';
 import {AuthenticationService} from '../../model/network/authentication.service';
+import {PiTitleService} from '../../model/pi-title.service';
 
 @Component({
   selector: 'app-albums',
@@ -32,12 +24,14 @@ export class AlbumsComponent implements OnInit {
   constructor(
     public albumsService: AlbumsService,
     private modalService: BsModalService,
-    public authenticationService: AuthenticationService
+    public authenticationService: AuthenticationService,
+    private piTitleService: PiTitleService
   ) {
     this.albumsService.getAlbums().catch(console.error);
   }
 
   ngOnInit(): void {
+    this.piTitleService.setTitle($localize`Albums`);
     this.updateSize();
   }
 

src/frontend/app/ui/duplicates/duplicates.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, OnDestroy } from '@angular/core';
+import {Component, HostListener, OnDestroy, OnInit} from '@angular/core';
 import {DuplicateService} from './duplicates.service';
 import {Utils} from '../../../../common/Utils';
 import {QueryService} from '../../model/query.service';
@@ -8,6 +8,7 @@ import { Subscription } from 'rxjs';
 import {Config} from '../../../../common/config/public/Config';
 import {PageHelper} from '../../model/page.helper';
 import {MediaDTO} from '../../../../common/entities/MediaDTO';
+import {PiTitleService} from '../../model/pi-title.service';
 
 interface GroupedDuplicate {
   name: string;
@@ -19,7 +20,7 @@ interface GroupedDuplicate {
   templateUrl: './duplicates.component.html',
   styleUrls: ['./duplicates.component.css'],
 })
-export class DuplicateComponent implements OnDestroy {
+export class DuplicateComponent implements OnDestroy, OnInit {
   directoryGroups: GroupedDuplicate[] = null;
   renderedDirGroups: GroupedDuplicate[] = null;
   renderedIndex = {
@@ -35,7 +36,8 @@ export class DuplicateComponent implements OnDestroy {
 
   constructor(
     public duplicateService: DuplicateService,
-    public queryService: QueryService
+    public queryService: QueryService,
+    private piTitleService: PiTitleService
   ) {
     this.duplicateService.getDuplicates().catch(console.error);
     this.subscription = this.duplicateService.duplicates.subscribe(
@@ -113,6 +115,10 @@ export class DuplicateComponent implements OnDestroy {
     );
   }
 
+  ngOnInit(): void {
+    this.piTitleService.setTitle($localize`Duplicates`);
+  }
+
   ngOnDestroy(): void {
     if (this.subscription) {
       this.subscription.unsubscribe();

src/frontend/app/ui/faces/faces.component.ts

@@ -4,6 +4,7 @@ import { QueryService } from '../../model/query.service';
 import { map } from 'rxjs/operators';
 import { PersonDTO } from '../../../../common/entities/PersonDTO';
 import { Observable } from 'rxjs';
+import {PiTitleService} from '../../model/pi-title.service';
 
 @Component({
   selector: 'app-faces',
@@ -18,7 +19,8 @@ export class FacesComponent implements OnInit {
 
   constructor(
     public facesService: FacesService,
-    public queryService: QueryService
+    public queryService: QueryService,
+    private piTitleService: PiTitleService
   ) {
     this.facesService.getPersons().catch(console.error);
     const personCmp = (p1: PersonDTO, p2: PersonDTO) => {
@@ -33,6 +35,7 @@ export class FacesComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.piTitleService.setTitle($localize`Faces`);
     this.updateSize();
   }
 

src/frontend/app/ui/gallery/MediaIcon.ts

@@ -8,7 +8,8 @@ export class MediaIcon {
 
   protected replacementSizeCache: number | boolean = false;
 
-  constructor(public media: MediaDTO) {}
+  constructor(public media: MediaDTO) {
+  }
 
   getExtension(): string {
     return this.media.name.substr(this.media.name.lastIndexOf('.') + 1);
@@ -28,14 +29,18 @@ export class MediaIcon {
     );
   }
 
-  getRelativePath(): string {
+  getReadableRelativePath(): string {
-    return (
+    return Utils.concatUrls(
-      encodeURI(
-        Utils.concatUrls(
       this.media.directory.path,
       this.media.directory.name,
       this.media.name
-        )
+    );
+  }
+
+  getRelativePath(): string {
+    return (
+      encodeURI(
+        this.getReadableRelativePath()
       )
         // do not escape all urls with encodeURIComponent because that make the URL ugly and not needed
         // do not escape before concatUrls as that would make prevent optimizations

src/frontend/app/ui/gallery/gallery.component.ts

@@ -15,6 +15,7 @@ import {take} from 'rxjs/operators';
 import {GallerySortingService} from './navigator/sorting.service';
 import {MediaDTO} from '../../../../common/entities/MediaDTO';
 import {FilterService} from './filter/filter.service';
+import {PiTitleService} from '../../model/pi-title.service';
 
 @Component({
   selector: 'app-gallery',
@@ -57,7 +58,8 @@ export class GalleryComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private navigation: NavigationService,
     private filterService: FilterService,
-    private sortingService: GallerySortingService
+    private sortingService: GallerySortingService,
+    private piTitleService: PiTitleService
   ) {
     this.mapEnabled = Config.Map.enabled;
     PageHelper.showScrollY();
@@ -148,7 +150,7 @@ export class GalleryComponent implements OnInit, OnDestroy {
     const searchQuery = params[QueryParams.gallery.search.query];
     if (searchQuery) {
       this.galleryService.search(searchQuery).catch(console.error);
-
+      this.piTitleService.setSearchTitle(searchQuery);
       return;
     }
 
@@ -171,6 +173,7 @@ export class GalleryComponent implements OnInit, OnDestroy {
     let directoryName = params[QueryParams.gallery.directory];
     directoryName = directoryName || '';
 
+    this.piTitleService.setDirectoryTitle(directoryName);
     this.galleryService.loadDirectory(directoryName);
   };
 

src/frontend/app/ui/gallery/grid/grid.gallery.component.ts

@@ -23,10 +23,7 @@ import { Subscription } from 'rxjs';
 import {ActivatedRoute, Params, Router} from '@angular/router';
 import {QueryService} from '../../../model/query.service';
 import {ContentService} from '../content.service';
-import {
+import {MediaDTO, MediaDTOUtils,} from '../../../../../common/entities/MediaDTO';
-  MediaDTO,
-  MediaDTOUtils,
-} from '../../../../../common/entities/MediaDTO';
 import {QueryParams} from '../../../../../common/QueryParams';
 
 @Component({
@@ -35,8 +32,7 @@ import { QueryParams } from '../../../../../common/QueryParams';
   styleUrls: ['./grid.gallery.component.css'],
 })
 export class GalleryGridComponent
-  implements OnInit, OnChanges, AfterViewInit, OnDestroy
+  implements OnInit, OnChanges, AfterViewInit, OnDestroy {
-{
   @ViewChild('gridContainer', {static: false}) gridContainer: ElementRef;
   @ViewChildren(GalleryPhotoComponent)
   gridPhotoQL: QueryList<GalleryPhotoComponent>;
@@ -68,7 +64,8 @@ export class GalleryGridComponent
     private router: Router,
     public galleryService: ContentService,
     private route: ActivatedRoute
-  ) {}
+  ) {
+  }
 
   ngOnChanges(): void {
     this.onChange();
@@ -246,7 +243,8 @@ export class GalleryGridComponent
       this.renderedPhotoIndex - 1 < index + 1 &&
       this.renderARow() !== null
       // eslint-disable-next-line no-empty
-    ) {}
+      ) {
+    }
   }
 
   private clearRenderedPhotos(): void {

src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts

@@ -16,6 +16,7 @@ import {PhotoDTO} from '../../../../../common/entities/PhotoDTO';
 import {ControlsLightboxComponent} from './controls/controls.lightbox.gallery.component';
 import {SupportedFormats} from '../../../../../common/SupportedFormats';
 import {GridMedia} from '../grid/GridMedia';
+import {PiTitleService} from '../../../model/pi-title.service';
 
 export enum LightboxStates {
   Open = 1,
@@ -72,7 +73,8 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     private router: Router,
     private queryService: QueryService,
     private galleryService: ContentService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private piTitleService: PiTitleService
   ) {
   }
 
@@ -239,12 +241,14 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     this.overlayService.showOverlay();
     this.blackCanvasOpacity = 1.0;
     this.showPhoto(this.gridPhotoQL.toArray().indexOf(selectedPhoto), false);
+    this.piTitleService.setMediaTitle(selectedPhoto.gridMedia);
   }
 
   public hide(): void {
     this.router
       .navigate([], {queryParams: this.queryService.getParams()})
       .catch(console.error);
+    this.piTitleService.setLastNonMedia();
   }
 
   animatePhoto(from: Dimension, to: Dimension = from): AnimationPlayer {
@@ -394,6 +398,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
         ),
       })
       .catch(console.error);
+    this.piTitleService.setMediaTitle(this.gridPhotoQL.get(photoIndex).gridMedia);
   }
 
   private showPhoto(photoIndex: number, resize = true): void {